欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>javascript教程>jquery教程

目录导航

bootstrap-tab标签页切换使用教程

美国SK机房 添加于 2013-11-22   bootstrap

jquery教程

关于$().tab()一般用来实现标签页和胶囊链接内容片段的切换,或是相关内容的页面导航:
<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-oggle='tab',当然,如果每个a链接都使用了此属性,那完全没有必要在用js来实现了

到零度科技查看原文:http://www.ldisp.com/a/jquery/2013/2328.shtml

上一篇:jQuery.getScript() 方法,$.getScript()使用方法
下一篇:jQuery.getScript() 动态加载JS文件 缓存问题

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

2

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理