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

bootstrap标签tab切换

时间:2018-10-30 14:46:20      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:efault   asc   属性   一点   click   select   标签   default   转行   

<ul class="nav nav-tabs" id="myTab"> 
      <li class="active"><a href="#home">Home</a></li> 
      <li><a href="#profile">Profile</a></li> 
      <li><a href="#messages">Messages</a></li> 
      <li><a href="#settings">Settings</a></li> 
    </ul> 
       
    <div class="tab-content"> 
      <div class="tab-pane active" id="home">...</div> 
      <div class="tab-pane" id="profile">...</div> 
      <div class="tab-pane" id="messages">...</div> 
      <div class="tab-pane" id="settings">...</div> 
    </div> 
       
    <script> 
      $(function () { 
        $(#myTab a:last).tab(show);//初始化显示哪个tab 
      
        $(#myTab a).click(function (e) { 
          e.preventDefault();//阻止a链接的跳转行为 
          $(this).tab(show);//显示当前选中的链接及关联的content 
        }) 
      }) 
    </script>

此外,你还可以有更多灵活的方式来激活某个特定的tab:

$(#myTab a[href="#profile"]).tab(show); // Select tab by name 
    $(#myTab a:first).tab(show); // Select first tab 
    $(#myTab a:last).tab(show); // Select last tab 
    $(#myTab li:eq(2) a).tab(show);

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

 

bootstrap标签tab切换

标签:efault   asc   属性   一点   click   select   标签   default   转行   

原文地址:https://www.cnblogs.com/moutudou/p/8066806.html

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