在每个链接的单击事件中调用tab(“show”)方法，显示对应的标签面板内容。针对上面的示例，删除HTML中自定义的 data-toggle=”tab” 或 data-toggle=”pill” 的属性，然后通过下面的脚本来调用：
$(function(){ $("#myTab a").click(function(e){ e.preventDefault(); $(this).tab("show"); }); }) 实例 ： <!-- 选项卡组件（菜单项nav-tabs）--> <ul role="tablist"> <li><a href="#a" role="tab">娱乐</a></li> <li><a href="#b" role="tab">房产</a></li> <li><a href="#c" role="tab">国内</a></li> <li><a href="#d" role="tab">国外</a></li> </ul> <!-- 选项卡面板 --> <div> <div>娱乐内容面板</div> <div>房产内容面板</div> <div>国内内容面板</div> <div>国外内容面板</div> </div> <script> $(function(){ $("#myTab2 a").click(function(e){ e.preventDefault(); $(this).tab("show"); }); }) </script>
下文点击查看
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：