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 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
js实现的网页颜色代码表全集
Jul 17 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
js相册效果代码(点击创建即可)
Apr 16 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
浅析Node.js中的内存泄漏问题
Jun 23 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
jquery实现文本框的禁用和启用
Dec 07 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
vue实现重置表单信息为空的方法
Sep 29 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
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
按上下级层次关系输出内容的PHP代码
2010/07/17 PHP
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
php封装的验证码类分享
2017/02/26 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
jQuery 注意事项 与原因分析
2009/04/24 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
python实现的各种排序算法代码
2013/03/04 Python
Python中文件操作简明介绍
2015/04/13 Python
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
瀑布模型都有哪些优缺点
2014/06/23 面试题
毕业自我评价
2014/02/05 职场文书
广告设计应届生求职信
2014/03/01 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
个人年终总结怎么写
2015/03/09 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
推荐信范文大全
2015/03/27 职场文书
感恩教育观后感
2015/06/17 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android
Java存储没有重复元素的数组
2022/04/29 Java/Android