引導標籤不工作時的數據目標，而不是HREF

我開發的引導標籤的使用data-target屬性相匹配的標籤面板，而不是使用href屬性，因爲我正在開發的角度應用（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/。我在哪裏重新創建整個。

我不想將引導樣式應用於我的選項卡，我只想要功能，我希望我的樣式應用，是否無論如何停止引導樣式應用？請提前幫助在此感謝任何幫助。

來源

2013-10-07 Mohamed Hussain

添加data-toggle="tab"屬性，在標記

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

Js Fiddle Demo

來源

2013-10-07 13:25:29 Sachin

感謝您的幫助。現在它正在工作。還有一個疑問，IE8是否支持數據切換屬性？ –

@MohamedHussain在twb源代碼中，他們使用jQuery的''attr''函數來讀取''data-attribute''。這應該得到大多數瀏覽器的支持（直到IE6，我想？），絕對是IE8 – Kippie

感謝這個解決方案，並且讓我免於瘋狂。 – Cheeky

嘗試這樣的：

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

來源

2013-10-07 13:24:06 Pascalz

正如@Sachin提到的，你必須指定data-toggle屬性。除此之外，請確保您正確填寫您的data-target s。這些都需要jQuery選擇，不元素ID，與`data-target使用時（link）

來源

2013-10-07 13:32:13 Kippie

感謝您的幫助，現在它正在工作 –

如果使用data-toggle="tab" - 你可以刪除JS初始化 -

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

引導會自動初始化標籤。

如果你想maually初始化你的標籤 - 你可以刪除佈局data-toggle="tab"並分別ITIN所有選項卡：

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

來源

2014-12-03 14:25:56 Azee

引導標籤不工作時的數據目標，而不是HREF

回答

相關問題