BootStrap中Tab页签切换实例代码

前端技术 2023/09/05 JavaScript

关于$().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来实现了。

本文地址：https://www.stayed.cn/item/14396

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案