0

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

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

4

2 回答 2

2

尝试将 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>
于 2013-08-30T05:26:22.537 回答
0 
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-30T05:25:15.937 回答