Bootstrap選項卡不讓我改變ID

好的，我正在構建一個具有Bootstrap選項卡的應用程序。我擁有Twitter Bootstrap必須在我的頭標中提供的所有.js文件。Bootstrap選項卡不讓我改變ID

當我添加標籤這樣它的工作原理

<ul class="nav nav-tabs" data-tabs="tabs" id="myTab"> 
    <li class="active"><a href="#tab1">Post Update</a></li> 
    <li><a href="#tab2">Post Photos</a></li> 
    <li><a href="#tab3">Post Video</a></li> 
    <li><a href="#tab4">Create a Poll</a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane active" id="tab1">Test 1</div> 
    <div class="tab-pane" id="tab2">Test 2</div> 
    <div class="tab-pane" id="tab3">Test 3</div> 
    <div class="tab-pane" id="tab4">Test 4</div> 
</div> 
<script> 
    $(function(){ 
     $('#myTab a:last').tab('show'); 
    }); 
</script>

但在另一方面，當我改變我的JavaScript和HTML標籤的ID，這是行不通的任何更多...

<ul class="nav nav-tabs" data-tabs="tabs" id="changedID"> 
    <li class="active"><a href="#tab1">Post Update</a></li> 
    <li><a href="#tab2">Post Photos</a></li> 
    <li><a href="#tab3">Post Video</a></li> 
    <li><a href="#tab4">Create a Poll</a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane active" id="tab1">Test 1</div> 
    <div class="tab-pane" id="tab2">Test 2</div> 
    <div class="tab-pane" id="tab3">Test 3</div> 
    <div class="tab-pane" id="tab4">Test 4</div> 
</div> 
<script> 
    $(function(){ 
     $('#changedID a:last').tab('show'); 
    }); 
</script>

有什麼方法可以解決引導標籤的問題，因爲如果我不能在同一頁上放置多個標籤集，這將會非常煩人。

來源

2013-08-30 user2731597

你改變'也是href？ –

只是猜測，但你是否在某處複製了ID？通過'tab4'檢查'changedID'和/或'tab1'的多個實例 – Phil

適用於我：[jsFiddle]（http://jsfiddle.net/Regisc/KqpmJ/） – 2013-08-30 05:16:01

嘗試增加數據切換=「標籤」，以您的鏈接，並確保您的第二組網頁上的標籤有不同的id

http://jsfiddle.net/JqGt9/1/

<div class="container"> 
<ul class="nav nav-tabs" id="myTab"> 
    <li class="active"><a href="#tab1" data-toggle="tab">Post Update</a></li> 
    <li><a href="#tab2" data-toggle="tab">Post Photos</a></li> 
    <li><a href="#tab3" data-toggle="tab">Post Video</a></li> 
    <li><a href="#tab4" data-toggle="tab">Create a Poll</a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane active" id="tab1">Test 1</div> 
    <div class="tab-pane" id="tab2">Test 2</div> 
    <div class="tab-pane" id="tab3">Test 3</div> 
    <div class="tab-pane" id="tab4">Test 4</div> 
</div> 
</div> 
<div class="container"> 
<ul class="nav nav-tabs" id="myTab2"> 
    <li class="active"><a href="#tab5" data-toggle="tab">Post Update</a></li> 
    <li><a href="#tab6" data-toggle="tab">Post Photos</a></li> 
    <li><a href="#tab7" data-toggle="tab">Post Video</a></li> 
    <li><a href="#tab8" data-toggle="tab">Create a Poll</a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane active" id="tab5">Test 5</div> 
    <div class="tab-pane" id="tab6">Test 6</div> 
    <div class="tab-pane" id="tab7">Test 7</div> 
    <div class="tab-pane" id="tab8">Test 8</div> 
</div> 
</div>

來源

2013-08-30 05:26:22 rolfsf

我認爲這有點奇怪，我可以使用一個ID爲標籤，但不是另一個ID .. – user2731597

真相是，.nav標籤上的ID有點不相關。真正的關鍵是每個.tab-pane的唯一ID。頁面上一個id的多個實例可能會產生不可預知的影響。 – rolfsf

Try this format. 

<ul class="nav nav-tabs" id="myTab"> 
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li> 
<li><a href="#tab2" data-toggle="tab">Section 2</a></li> 
</ul> 
<div class="tab-content"> 
<div class="tab-pane active" id="tab1"> 
<p>I'm in Section 1.</p> 
</div> 
<div class="tab-pane" id="tab2"> 
<p> I'm in Section 2.</p> 
</div> 
</div> 


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

來源

2013-08-30 05:25:15

Bootstrap選項卡不讓我改變ID

回答

相關問題