Bootstrap活動標籤沒有正確停用

我對twitter引導相當陌生，並且繼承了一個我正在嘗試調試的項目。我的問題是，我有一個嵌入在導航欄內的下拉菜單。下拉菜單上的項目與一些選項卡式內容相對應。我希望該下拉菜單中的第一項默認爲激活，並顯示相應的選項卡內容。我可以得到這個工作，但當點擊不同的菜單項時，問題就變成了，最初的項目仍然是「活動的」。只有在點擊第三個項目後，第一個/默認項目才能正確停用。Bootstrap活動標籤沒有正確停用

這是代碼和一個JSFiddle。

<div id="content" class="container"> 
    <div template="header" id="header"> 
     <div class="navbar"> 
      <div class="navbar-inner"> 
       <ul class="nav"> 
        <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Stats <b class="caret"></b></a> 

         <ul class="dropdown-menu"> 
          <li class="active"><a href="#lastday" id="id_day" data-toggle="tab">Last 24 hours</a> 
          </li> 
          <li class=""><a href="#sevendays" id="id_week" data-toggle="tab">Last 7 days</a> 
          </li> 
          <li class=""><a href="#thirtydays" id="id_month" data-toggle="tab">Last 30 days</a> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div template="dash" class="tab-content"> 
     <div class="tab-pane main-content" id="sevendays"> 
      <div class="offset1 span4"> 
       <h2>7 Days</h2> 
      </div> 
     </div> 
     <div class="tab-pane main-content" id="thirtydays"> 
      <div class="offset1 span4"> 
       <h2>30 Days</h2> 
      </div> 
     </div> 
     <div class="tab-pane main-content active" id="lastday"> 
      <div class="offset1 span4"> 
       <h2>24 Hours</h2> 
      </div> 
     </div> 
    </div> 
</div>

http://jsfiddle.net/hKQA8/

注意如何當你點擊STATS 7天的內容被選爲是與其相關的標籤。如果您然後點擊24小時，則關聯的選項卡將變爲選中狀態。但是，如果您回到下拉菜單中，您會看到7天和24小時都保持突出顯示/活動狀態。只有在點擊第三項之後，才能正常開始工作。

來源

2014-01-14 WesleyJohnson

因此，我的老闆花了一些時間和我一起看這個，他提出瞭解決方案。事實證明，因爲選項卡菜單嵌套在另一個菜單下，所以您必須將該父菜單的項目設置爲「active」，然後問題消失。這是更新的JSFiddle，以防其他人遇到問題。

<li class="dropdown active">

http://jsfiddle.net/hKQA8/3/

來源

2014-01-14 18:57:11 WesleyJohnson

Bootstrap活動標籤沒有正確停用

回答

相關問題