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 相关文章推荐
用Javascript实现UTF8编码转换成gb2312编码
Dec 22 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
使用node.js 获取客户端信息代码分享
Nov 26 Javascript
script标签属性用type还是language
Jan 21 Javascript
Javascript中的arguments与重载介绍
Mar 15 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
浅谈JavaScript中null和undefined
Jul 09 Javascript
JQuery实现鼠标滚轮滑动到页面节点
Jul 28 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
详解vue-router导航守卫
Jan 19 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 Javascript
用js实现放大镜效果
Oct 28 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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
python对验证码降噪的实现示例代码
2019/11/12 Python
Python面向对象封装操作案例详解
2019/12/31 Python
python中Django文件上传方法详解
2020/08/05 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
opencv实现图像几何变换
2021/03/24 Python
护士辞职信范文
2014/01/19 职场文书
读书演讲主持词
2014/03/18 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
小学数学教学反思范文
2016/02/16 职场文书
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python