Question

好的，我正在构建一个具有Bootstrap Tabs的应用程序。我拥有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>

Answer 2

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');
})

Bootstrap选项卡不让我更改ID

2 个答案: