沃梦达 / 实例代码 / 前端实例代码 / 正文

Bootstrap activate.bs.scrollspy事件

前端实例代码
1970-01-01

htmlheadlink rel = stylesheet href = bootstrap/css/bootstrap.min.css

编程学习网为您整理以下代码实例，主要实现：Bootstrap activate.bs.scrollspy事件，希望可以帮到各位朋友。

<HTML>

   <head>
      <link rel = "stylesheet" href = "bootstrap/CSS/bootstrap.min.CSS">
      <script src = "bootstrap/scripts/jquery.min.Js"></script>
      <script src = "bootstrap/Js/bootstrap.min.Js"></script>

      <script>
         $(document).ready(function(){
            removeSection = function(e) {
               $(e).parents(".subject").remove();

               $('[data-spy="scroll"]').each(function () {
                  var $spy = $(this).scrollspy('refresh')
               });
            }

            $("#Navexample").scrollspy();

            // The event is fired when an item gets actived with the scrollspy
            $("#Navexample").on('activate.bs.scrollspy', function () {
               var currentSection = $(".nav li.active > a").text();
               $("#spyevent").HTML("Current Item being vIEwed >> " + currentSection);
            })

         });
      </script>

      <style>
         .scroll-Box {
            height: 250px;
            position: relative;
            overflow: auto;
            Font-size:2em;
         }
      </style>
   </head>

   <body>
      <div class = "container">
         <nav ID = "Navexample" class = "navbar navbar-default" role = "navigation">

            <!-- Nav bar -->
            <div class = "navbar-header">
               <button type = "button" class = "navbar-toggle" 
                  data-toggle = "collapse" data-target = "#navbarCollapse">

                  <span class = "sr-only">Toggle navigation</span>
                  <span class = "icon-bar"></span>
                  <span class = "icon-bar"></span>
                  <span class = "icon-bar"></span>
               </button>

               <a class = "navbar-brand" href = "#">Tutorials Point</a>
            </div>

            <!-- links and Sublinks -->
            <div class = "collapse navbar-collapse" ID = "navbarCollapse">
               <ul class = "nav navbar-nav">
                  <li class = "active"><a href = "#subject-1">Subject 1</a></li>
                  <li><a href = "#subject-2">Subject 2</a></li>

                  <li class = "dropdown"><a href = "#" class = "dropdown-toggle" 
                     data-toggle = "dropdown">Subject 3<b class = "caret"></b></a>

                     <ul class = "dropdown-menu">
                        <li><a href = "#subject-3-1">Subject 3.1</a></li>
                        <li><a href = "#subject-3-2">Subject 3.2</a></li>
                        <li><a href = "#subject-3-3">Subject 3.3</a></li>
                     </ul>

                  </li>

                  <li><a href = "#subject-4">Subject 4</a></li>
               </ul>
            </div>
         </nav>

         <div class = "scroll-Box" data-spy = "scroll" data-offset = "0">
            <div class = "subject">

               <h3 ID = "subject-1">Subject 1 
                  <small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
               </h3>

               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incIDIDunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>

            <hr>

            <div class = "subject">
               <h3 ID = "subject-2">Subject 2 
                  <small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
               </h3>

               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incIDIDunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>

            <hr>

            <div class = "subject">
               <h3 ID = "subject-3">Subject 3 
                  <small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
               </h3>

               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incIDIDunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>

            <hr>

            <div class = "subject">
               <h4 ID = "subject-3-1">Subject 3.1
                  <small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
               </h4>

               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incIDIDunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>

            <div class = "subject">
               <h4 ID = "subject-3-2">Subject 3.2
                  <small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
               </h4>

               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incIDIDunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>

            <div class = "subject">
               <h4 ID = "subject-3-3">Subject 3.3 
                  <small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
               </h4>

               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incIDIDunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>

            <hr>

            <div class = "subject">
               <h3 ID = "subject-4">Subject 4 
                  <small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
               </h3>

               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incIDIDunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
         </div>

         <hr>

         <h4 ID = "spyevent" class = "text-info"></h4>
      </div>

   </body>
</HTML>

本文标题为：Bootstrap activate.bs.scrollspy事件

上一篇： 带有属性的Bootstrap Tooltip插件
下一篇： Bootstrap Scrollspy方法
猜你喜欢
最新文章
热门文章
网站首页 HTML/CSS 菜单 Layui Yii2