使用數據目標而不是href的選項卡時，Bootstrap選項卡不起作用

Question

我正在開發bootstrap選項卡，使用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演示

Answer 2

試試這樣：

jQuery(function () {
    jQuery('#myTab a').on('click', function() {
        $(this).tab('show');
    });
})

Answer 3

正如@Sachin所提到的，您必須指定data-toggle屬性。 除此之外，請確保正確填寫data-target 。 當與`data-target一起使用時，它們采用jQuery選擇器， 而不是元素id。（ 鏈接 ）

Answer 4

如果您使用data-toggle="tab" - 您可以刪除您的js初始化 -

<script>
    jQuery(function () {
        jQuery('#myTab a:last').tab('show')
    })
</script>

Bootstrap將自動初始化選項卡。

如果您想要以電子方式初始化標簽，可以從布局中刪除data-toggle="tab" ，並在所有標簽中單獨刪除：

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
})