引導程序3選項卡沒有正確切換活動狀態

我有這一點的代碼 - 只是在每個選項卡式面板中帶有單獨圖形的選項卡式面板。當切換標籤時，內容加載不正確。當我點擊另一個標籤時，面板的活動狀態不會改變，你能幫助brotha弄清楚這一點嗎？引導程序3選項卡沒有正確切換活動狀態

<div class="col-sm-6"> 
    <!-- Tabs --> 
    <ul class="nav nav-tabs" role="tablist"> 
     <li class="active"><a href="#DailyIncome" role="tab" data-toggle="tab">Daily Income</a></li> 
     <li><a href="#YearlyIncome" role="tab" data-toggle="tab">Yearly Income</a></li> 
     <li><a href="#Clients" role="tab" data-toggle="tab">Clients</a></li> 
     <li><a href="#Orders" role="tab" data-toggle="tab">Orders</a></li> 
    </ul> 
    <!-- Content --> 
    <div class="tab-content"> 
     <div class="tab-pane fade in active" id="DailyIncome"> 
      <div id="DailyIncomeChart" class="DailyIncomePanel"></div> 
     </div> 
     <div class="tab-pane fade" id="YearlyIncome"> 
      <div id="YearlyIncomeChart" class="YearlyIncomePanel"></div> 
     </div> 
     <div class="tab-pane fade" id="Clients"></div> 
     <div class="tab-pane fade" id="Orders"></div> 
    </div> 
</div>

來源

2014-10-01 Sabolis

你也許忘了在頁面上包含jQuery？當我第一次做這個codepen：

http://codepen.io/anon/pen/tGhHk

我忘記包括：

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

當然和標籤（這是Javascript語言，引導驅動）沒有工作，但是當我想起，一切都很好。

來源

2014-10-01 02:22:05 jeffersii

我確實在頁面中加載了JQuery頭文件。 – Sabolis 2014-10-01 02:23:28

嗯。那麼你究竟想要在這些標籤中發生什麼？他們似乎按照預期工作（至少在CodePen中）如你所寫。你是否試圖觸發add'l行爲？ – jeffersii 2014-10-01 02:57:57

我有其中的圖。當我切換標籤時，「活動」類不適用於其他選項卡，並且內部的圖形無法正確顯示。 – Sabolis 2014-10-01 03:01:37

這裏是如何得到它的工作：在頁面的底部

<ul id="myTab" class="nav nav-tabs" role="tablist">

加載jQuery和引導JS：

添加一個ID，標籤<ul>，像這樣，在</body>標籤之前，像這樣：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
啓用通過JavaScript選項卡（一定要添加這個引導之下JS）：

<script> $('#myTab a').click(function (e) { e.preventDefault() $(this).tab('show') }) </script>
刷新你的頁面，它現在應該工作。

來源

2014-10-01 04:37:42 mariordev

相信我，如果它像複製引導程序網站所說的那樣容易，我就不會在這裏。這是行不通的，我試過了。 – Sabolis 2014-10-01 18:57:06

我回答了我自己的問題。

我簡單地將.active添加到每個單獨的選項卡窗格中，並將溢出設置隱藏在CSS中。

來源

2014-10-01 18:58:01 Sabolis

引導程序3選項卡沒有正確切換活動狀態

回答

相關問題