BootStrap中Tab页签切换实例代码


Posted in Javascript onMay 30, 2016

关于$().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-toggle='tab',当然,如果每个a链接都使用了此属性,那完全没有必要在用js来实现了。

Javascript 相关文章推荐
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
vue2.0 自定义日期时间过滤器
Jun 07 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 #Javascript
拥Bootstrap入怀——导航栏篇
May 30 #Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 #Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 #Javascript
Bootstrap编写导航栏和登陆框
May 30 #Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 #Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 #Javascript
You might like
色色整理的PHP面试题集锦
2012/03/08 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
Python进程间通信用法实例
2015/06/04 Python
python中的全局变量用法分析
2015/06/09 Python
python中enumerate函数遍历元素用法分析
2016/03/11 Python
python 排序算法总结及实例详解
2016/09/28 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
护士毕业自我鉴定
2014/02/07 职场文书
十八届三中全会学习方案
2014/02/16 职场文书
办公室员工岗位工作职责
2014/03/10 职场文书
五水共治一句话承诺
2014/05/30 职场文书
授权委托书格式
2014/07/31 职场文书
移交协议书
2014/08/19 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
领导欢迎词致辞
2015/01/23 职场文书
2016春季运动会前导词
2015/11/25 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js
React Fragment介绍与使用详解
2021/11/11 Javascript