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 prototype,executing,context,closure
Dec 24 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
Jun 07 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
中国地区三级联动下拉菜单效果分析
Nov 15 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 Javascript
js编写贪吃蛇的小游戏
Aug 24 Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
javascript实现的左右无缝滚动效果
Sep 19 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 Javascript
详解用场景去理解函数柯里化(入门篇)
Apr 11 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
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 获取本地IP代码
2013/06/23 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
js 字符串操作函数
2009/07/25 Javascript
JavaScript 学习技巧
2010/02/17 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
简单的通用表达式求10乘阶示例
2014/03/03 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
python下载图片实现方法(超简单)
2017/07/21 Python
Python基于property实现类的特性操作示例
2018/06/15 Python
python实现自动登录
2018/09/17 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
用Python写一个自动木马程序
2019/09/17 Python
Python 私有化操作实例分析
2019/11/21 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
高级3D打印市场:Gambody
2019/12/26 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
密封类可以有虚函数吗
2014/08/11 面试题
工艺工程师岗位职责
2014/03/04 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
宣传活动总结范文
2014/07/01 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
致接力运动员加油稿
2015/07/21 职场文书
用Python selenium实现淘宝抢单机器人
2021/06/18 Python