Javascript 引导选项卡不允许我更改ID

好的，我正在构建一个具有引导选项卡的应用程序。我的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>

测试1
测试2
测试3
测试4
$（函数（）{
$（'#myTab a:last'）.tab（'show'）；
});

但另一方面，当我在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>

测试1
测试2
测试3
测试4
$（函数（）{
$（'a:last'）。选项卡（'show'）；
});

有没有办法用引导选项卡解决这个问题，因为如果我不能在同一页上放置多组选项卡，这将非常烦人。

试试这种格式。
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');
})





我在第一区

我在第二节

----------
$（“#myTab a”）。单击（函数（e）{
e、 预防默认值（）；
$（this.tab（'show'）；
})

尝试向链接添加data toggle=“tab”，并确保页面上的第二组选项卡具有不同的id

测试1
测试2
测试3
测试4






测试5
测试6
测试7
测试8

您是否也更改了

a

的href？只是猜测，但您是否在某处复制了ID？检查

changedID

和/或

tab1

到

tab4

的多个实例是否对我有效：@RC。你真的试过点击标签吗？似乎没有work@Philis没有在他的小提琴上工作，因为他刚刚将标签绑定到一个锚标签上。试试这个我觉得有点奇怪，我可以用一个id来做标签，但不能用另一个id。事实上，.nav标签上的id有些不相关。真正的键是每个.tab窗格的唯一id。页面上一个id的多个实例可能会产生不可预测的影响。

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