Chinaunix首页 | 论坛 | 博客
  • 博客访问: 452318
  • 博文数量: 226
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 2111
  • 用 户 组: 普通用户
  • 注册时间: 2014-06-20 09:02
个人简介

web web web

文章分类

全部博文(226)

文章存档

2020年(2)

2019年(1)

2018年(3)

2017年(26)

2016年(57)

2015年(60)

2014年(77)

我的朋友

分类: Web开发

2015-06-03 09:17:47

原文地址:bootStrap中Tab页签切换 作者:lrfgjj2

关于$().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.        
  8.     <div class="tab-content">
  9.       <div class="tab-pane active" id="home">...</div>
  10.       <div class="tab-pane" id="profile">...</div>
  11.       <div class="tab-pane" id="messages">...</div>
  12.       <div class="tab-pane" id="settings">...</div>
  13.     </div>
  14.        
  15.     <script>
  16.       $(function () {
  17.         $('#myTab a:last').tab('show');//初始化显示哪个tab
  18.       
  19.         $('#myTab a').click(function (e) {
  20.           e.preventDefault();//阻止a链接的跳转行为
  21.           $(this).tab('show');//显示当前选中的链接及关联的content
  22.         })
  23.       })
  24.     </script>

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

  1. $('#myTab a[href="#profile"]').tab('show'); // Select tab by name
  2.     $('#myTab a:first').tab('show'); // Select first tab
  3.     $('#myTab a:last').tab('show'); // Select last tab
  4.     $('#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来实现了:

阅读(1567) | 评论(0) | 转发(0) |
0

上一篇:CSS sprite

下一篇:缓存图片技术

给主人留下些什么吧!~~