Bootstrap Tabs不隱藏非活動div

我無法弄清楚如何將*（MSV，HOF，TOES）下面的三個div分隔成每個尊重的選項卡。這些標籤可以正常工作並正常顯示。我無法得到顯示的標籤疼痛。Bootstrap Tabs不隱藏非活動div

下面是代碼：

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

來源

2012-11-20 Cassette

請嘗試以下代碼。您只需刪除<div class="tab-content">中的<Ul>，然後使用<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>

來源

2012-11-20 00:52:10 Adit

工作就像一個魅力。非常感謝：） – Cassette

Bootstrap Tabs不隱藏非活動div

回答

相關問題