javascript - Bootstrap Tabs 不允许我更改 ID

Question

好的，我正在构建一个具有 Bootstrap 选项卡的应用程序。我的 head 标签中有 Twitter Bootstrap 必须提供的所有 .js 文件。

当我像这样添加标签时它起作用了

<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>

有什么方法可以解决 Bootstrap 选项卡的这个问题，因为如果我不能在同一页面上放置多个选项卡，这会变得非常烦人。

Answer 1

尝试将 data-toggle="tab"添加到您的链接中，并确保页面上的第二组选项卡具有不同的 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>