Twitter Bootstrap選項卡沒有隱藏內容

我的代碼有點問題。該標籤加載，但當我點擊另一個非活動標籤不隱藏第一個標籤的內容並顯示兩個標籤的內容。有什麼我可以做的嗎？非常感謝你！Twitter Bootstrap選項卡沒有隱藏內容

<ul style="list-style:none"class="available-tabs nav nav-tabs" id="tabs" data-tabs="tabs"> 
      <li class="active"> <a data-toggle="tab" href="#featured-tab-body">FEATURED PROJECTS</a></li> 
      <li> <a data-toggle="tab" href="#available-latest-tab">LATEST PROJECTS </a> </li> 
</ul> 
<div class="available-content tab-content container"> 
    <div id="available-featured-tab"> 
    <div class="featured-list-wrapper"> 
     <div class="row"> 
     <div class="col-md-12"> 
      <div class="featured-list-content"> 
      <div class="row featured-tab-head" style="color:black;height:40px"> 
       <div class="col-md-5 col-sm-5 col-xs-8"> 
       <h5> YAE</h5> 
       </div> 
       <div class="col-md-2 col-sm-2 hidden-xs"> 
       <h5>NAH</h5> 
       </div> 
       <div class="col-md-2 hidden-sm hidden-xs"> 
       <h5>HEY</h5> 
       </div> 
       <div class="col-md-1 col-sm-2 hidden-xs"> 
       <h5>YOU</h5> 
       </div> 
      </div> 
      <div class="featured-tab-body tab-pane fade in active"> 
       sup 
      </div> 
      </div> 
     </div> 
    </div> 
    </div> 
    <div id="available-latest-tab" class="tab-pane fade"> 
    hi 
    </div> 
</div>

來源

2016-07-28 Th3Vampir3

創建演示樣的jsfiddle –

http://jsfiddle.net/Th3Vampir3/xFW8t/1775/ – Th3Vampir3

http://jsfiddle.net/xFW8t/1776/ –

您需要將所有的div內容放在同一個根div下。的所以istead：

<div class="available-content tab-content container"> 
    <div id="available-featured-tab"> 
     <div class="featured-list-wrapper"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <div class="featured-list-content"> 
         <div class="featured-tab-body tab-pane fade in active"> 
          sup 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div id="available-latest-tab" class="tab-pane fade"> 
     hi 
    </div> 
</div>

您需要：

<div class="available-content tab-content container"> 
    <div id="available-featured-tab"> 
     <div class="featured-list-wrapper"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <div class="featured-list-content"> 
         <div class="featured-tab-body tab-pane fade in active"> 
          sup 
         </div> 
         <div id="available-latest-tab" class="tab-pane fade"> 
          hi 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

無需Jquery的，因爲引導做的工作適合你。修正小提琴： http://jsfiddle.net/xFW8t/1777/

來源

2016-07-28 12:51:56

現在工作很好，非常感謝你！ – Th3Vampir3

Twitter Bootstrap選項卡沒有隱藏內容

回答

相關問題