twitter-bootstrap - Bootstrap Tabs 不隐藏非事件 div

Question

我无法弄清楚如何将下面的三个 div *(MSV、HOF、TOES)中的每一个分开到它们各自受尊重的选项卡中。选项卡工作，并正确显示。我就是无法显示制表符。

代码如下:

<p><i class="icon-heart"></i>&nbsp;Progression</p>

<ul class="nav nav-tabs" id="myTab" data-tabs="tabs">
  <li class="active"><a data-toggle="tab" href="#MSV">MSV</a></li>
  <li><a data-toggle="tab" href="#TOES">ToES</a></li>
  <li><a data-toggle="tab" href="#HoF">HoF</a></li>
</ul>

<div class="tab-content">
<ul class="nav nav-list">

<div class="tab-pain active" id="MSV">
    <li>Mogu'shan Vaults</li>
        <a rel="tooltip" title="Normal">
        <li>
        <div class="progress progress-striped active">
        <div class="bar" style="width: 100%;">6/6</div>
        </div>
        </li>
        </a>

        <a rel="tooltip" title="Heroic">
        <li>
        <div class="progress">
        <div class="bar bar-active" style="width: 3%;"></div>
        <div class="bar bar-danger" style="width: 97%;">0/6</div>
        </div>
        </li>
        </a>
</div>

<div class="tab-pain" id="HOF">
    <li>Heart of Fear</li>
        <a rel="tooltip" title="Normal">
        <li>
        <div class="progress progress-striped active">
        <div class="bar" style="width: 20%;">1/6</div>
        </div>
        </li>
        </a>
</div>      

<div class="tab-pain" id="TOES">        
    <li>Terrace of Endless Spring</li>
        <a rel="tooltip" title="Heroic"><li>
        <div class="progress">
        <div class="bar bar-active" style="width: 3%;"></div>
        <div class="bar bar-danger" style="width: 97%;">0/6</div>
        </div>
        </li>
        </a>
</div>
</div>
</ul>

<script>
$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})
</script>

Answer 1

请尝试以下代码。您需要做的就是删除 <Ul>在<div class="tab-content">里面并使用 <div class="tab-pane">而不是 <div class="tab-pain"> . 同时将 href 从 href="#HoF"更改为 href="#HOF"。

<p>
    <i class="icon-heart"></i>&nbsp;Progression</p>
<ul class="nav nav-tabs" id="myTab" data-tabs="tabs">
    <li class="active"><a data-toggle="tab" href="#MSV">MSV</a></li>
    <li><a data-toggle="tab" href="#TOES">ToES</a></li>
    <li><a data-toggle="tab" href="#HOF">HoF</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="MSV">
        <li>Mogu'shan Vaults</li>
        <a rel="tooltip" title="Normal">
            <li>
                <div class="progress progress-striped active">
                    <div class="bar" style="width: 100%;">
                        6/6</div>
                </div>
            </li>
        </a><a rel="tooltip" title="Heroic">
            <li>
                <div class="progress">
                    <div class="bar bar-active" style="width: 3%;">
                    </div>
                    <div class="bar bar-danger" style="width: 97%;">
                        0/6</div>
                </div>
            </li>
        </a>
    </div>
    <div class="tab-pane" id="HOF">
        <li>Heart of Fear</li>
        <a rel="tooltip" title="Normal">
            <li>
                <div class="progress progress-striped active">
                    <div class="bar" style="width: 20%;">
                        1/6</div>
                </div>
            </li>
        </a>
    </div>
    <div class="tab-pane" id="TOES">
        <li>Terrace of Endless Spring</li>
        <a rel="tooltip" title="Heroic">
            <li>
                <div class="progress">
                    <div class="bar bar-active" style="width: 3%;">
                    </div>
                    <div class="bar bar-danger" style="width: 97%;">
                        0/6</div>
                </div>
            </li>
        </a>
    </div>
</div>
<script>
    $('#myTab a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    })
</script>