使用数据目标而不是href的选项卡时,Bootstrap选项卡不起作用

Question

我正在开发引导选项卡,使用data-target属性来匹配选项卡窗格而不是使用href属性,因为我正在开发角度应用程序(href可能会破坏我的路线).

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a data-target="home">Home</a></li>
    <li><a data-target="profile">Profile</a></li>
    <li><a data-target="messages">Messages</a></li>
    <li><a data-target="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>
    jQuery(function () {
        jQuery('#myTab a:last').tab('show')
    })
</script>

请看这个小提琴http://jsfiddle.net/xFW8t/4/.我重新创造了整体.

我不希望引导程序样式应用于我的选项卡,我只想要功能,我希望我的样式应用,无论如何停止引导样式应用？请提前感谢您的帮助.

Answer 1

data-toggle="tab"在标记中添加属性

<a data-target="#home" data-toggle="tab">Home</a>

Js Fiddle演示