码迷,mamicode.com
首页 > 其他好文 > 详细

tab页签切换----bootstrap

时间:2014-11-07 15:13:11      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:style   io   color   ar   使用   java   sp   for   div   

关于$().tab()一般用来实现标签页和胶囊链接内容片段的切换,或是相关内容的页面导航:

  1. <ul class="nav nav-tabs" id="myTab"> 

  2.       <li class="active"><a href="#home">Home</a></li> 

  3.       <li><a href="#profile">Profile</a></li> 

  4.       <li><a href="#messages">Messages</a></li> 

  5.       <li><a href="#settings">Settings</a></li> 

  6.     </ul> 

  7.     <div class="tab-content"> 

  8.       <div class="tab-pane active" id="home">...</div> 

  9.       <div class="tab-pane" id="profile">...</div> 

  10.       <div class="tab-pane" id="messages">...</div> 

  11.       <div class="tab-pane" id="settings">...</div> 

  12.     </div>        

        <script> 

  13.       $(function () { 

  14.         $(‘#myTab a:last‘).tab(‘show‘);//初始化显示哪个tab

  15.         $(‘#myTab a‘).click(function (e) { 

  16.           e.preventDefault();//阻止a链接的跳转行为 

  17.           $(this).tab(‘show‘);//显示当前选中的链接及关联的content 

  18.         }) 

  19.       }) 

  20.    </script>
    此外,你还可以有更多灵活的方式来激活某个特定的tab:

  21. $(‘#myTab a[href="#profile"]‘).tab(‘show‘); // Select tab by name 

  22.     $(‘#myTab a:first‘).tab(‘show‘); // Select first tab 

  23.     $(‘#myTab a:last‘).tab(‘show‘); // Select last tab 

  24.     $(‘#myTab li:eq(2) a‘).tab(‘show‘);
    以上代码需要注意的一点是,每个li中的a标签都要有个href=#id,这个id指向的正是该链接对应的content的id,如果使用
    javascript实现这种导航内容的切换,a标签中无须再添加data-toggle=‘tab‘,当然,如果每个a链接都使用了此属性,那完全没有
    必要在用js来实现了:
    以上代码需要注意的一点是,每个li中的a标签都要有个href=#id,这个id指向的正是该链接对应的content的id,如果使用
    javascript实现这种导航内容的切换,a标签中无须再添加data-toggle=‘tab‘,当然,如果每个a链接都使用了此属性,那完全没有
    必要在用js来实现了:

tab页签切换----bootstrap

标签:style   io   color   ar   使用   java   sp   for   div   

原文地址:http://my.oschina.net/guomingliang/blog/341859

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!