首页 > Web开发 > 详细

分页浏览的导航栏Bootstrap和js两种方法

时间:2016-05-20 13:16:53      阅读:225      评论:0      收藏:0      [点我收藏+]

1,Bootstrap写法:

    效果图:

         技术分享

 

        代码:

 

      

技术分享
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title> 应用</title>
  <link href="bootstrap.min.css" rel="stylesheet" style="test/css">
  <script src="jquery-2.2.3.min.js"></script>
  <script src="bootstrap.min.js"></script>

 </head> 
 <body>
 <br/>
      <div class="container">
          <ul id="myTabs" class="nav nav-tabs">
              <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
              <li><a href="#profile" data-toggle="tab">Profile</a></li>
              <li class="dropdown">
                   <a href="#" id="myTabdrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown
                       <span class="caret"></span>
                   </a>

                   <ul class="dropdown-menu" role="menu">
                        <li><a href="#D1" tabindex="-1" data-toggle="tab">D1</a></li>
                        <li><a href="#D2" tabindex="-1" data-toggle="tab">D2</a></li>
                   </ul>
              </li>
          </ul> 
          <div id="myTabContent" class="tab-content">
               <div class="tab-pane fade in active" id="home">
                   <p>1</p>
               </div>

               <div class="tab-pane fade" id="profile">
                   <p>2</p>
               </div>

                 <div class="tab-pane fade" id="D1">
                   <p>3</p>
               </div>

                 <div class="tab-pane fade" id="D2">
                   <p>4</p>
               </div>
          </div>
      </div>

<!--      <script>
        //  $("#myTabs a:last").tab("show");
         // $("#myTabs li:eq(0) a").tab("show");   //改变eq后面的数字就行,从0开始
          $("a[data-toggle=‘tab‘]").on("shown.bs.tab",function(e){
               alert("Hello");
          })
      </script>
-->
 </body>
</html>
View Code

 

Js写法:

   效果图:

     晚上更新

    

 

分页浏览的导航栏Bootstrap和js两种方法

原文:http://www.cnblogs.com/147258llj/p/5511649.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!