tab页签切换----bootstrap

2019独角兽企业重金招聘Python工程师标准>>>

关于$().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来实现了：
以上代码需要注意的一点是，每个li中的a标签都要有个href=#id,这个id指向的正是该链接对应的content的id，如果使用
javascript实现这种导航内容的切换，a标签中无须再添加data-toggle='tab'，当然，如果每个a链接都使用了此属性，那完全没有
必要在用js来实现了：

转载于:https://my.oschina.net/guomingliang/blog/341859

tab页签切换----bootstrap相关推荐

Bootstrap tab页签刷新加载不显示，只有点击其他标签后第一个才显示
Bootstrap tab页签刷新加载不显示,只有点击其他标签后第一个才显示解决方法: 在tab-content里面的tab-pane中添加active  < ...
Axure 9 实战案例，母版的应用 2，运用母版交互绘制Tab页签
前言 Hello!欢迎来到Axure 9 实战案例教程专栏.点击了解课程简介>> 上一篇教程我们讲解了运用母版绘制微信APP的导航菜单(点击阅读该教程>>),本篇教程我们继续来 ...
Vue头部菜单,点击菜单新增tab页签
Vue头部菜单,点击菜单新增tab页签 <template> <div class="wrapper"> < ...
UltraEdit 设置 tab页签显示
http://blog.itpub.net/22664653/viewspace-704576/ 不小心将ue编辑器设置成了移动窗口,当有多个页面的时候,切换很麻烦,想要将UltraEdit设置为t ...
如何动态为 tabstrip 中的 tab 页签指定标题
网上居然搜不到相关的文章,所以我来写一篇吧. 其实就是两个要点,只要注意就行了. 首先,最重要的一点,在绘制屏幕的时候,给 tab 页签的属性指定为"输出字段",这时,它的&quo ...
利用vuex关闭当前tab页签
在vuex的js文件中写如下方法:(如果没有vuex的js文件,可以自己写一个,参考另外一篇文章,讲解vuex的) /*** @class closeNow* @description 关闭当前界面页 ...
浏览器tab页签上的title图标favicon.icon
文章目录浏览器tab页签上的title图标favicon.icon 什么是favicon? 如何查看favicon 在线生成favicon 浏览器tab页签上的title图标如何设置浏览器tab页 ...
Cypress之处理页面弹框以及多tab页间切换
上次博客讲解了如何模拟键盘输入和鼠标操作以及拖动页面元素,此次课程将介绍如何处理页面弹框,保证测试案例继续运行.另外,还会介绍如果测试案例跨多个tab页,如何实现多tab页间切换测试.最后介绍cypr ...
antd-pro v5版本的tab页签最简实践
antd-pro v5版本的tab页签最简实践前言网上找了很多资料,也看了好些个代码,总觉得他们写的太累赘了.其实官方自己也说了,antdpro做页签和他们的产品理念不符合才不做,但是不代表他们没 ...

tab页签切换----bootstrap

tab页签切换----bootstrap相关推荐

最新文章

热门文章