Bootstrap 3 вкладки Непереключение активного состояния

У меня есть этот бит кода - только панели с вкладками с отдельными графами на каждой панели вкладок. Когда я переключаю вкладки, содержимое загружается неправильно. Активное состояние панели не меняется, когда я нажимаю другую вкладку, можете ли вы помочь бротту понять это?Bootstrap 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 ведомые в Bootstrap) не работает, но когда я вспомнил , все было хорошо снова.

источник

2014-10-01 02:22:05 jeffersii

У меня есть JQuery, загружаемый на страницу в заголовке. – Sabolis

Хммм. Хорошо, что вы пытаетесь добиться именно на этих вкладках? Кажется, они работают как ожидалось (по крайней мере, в CodePen), как вы их написали. Вы пытаетесь вызвать add'l поведение? – jeffersii

У меня есть графики, которые внутри них. Когда я переключаю вкладки над «активным» классом, не применяется к другим вкладкам, и графики внутри не отображаются должным образом. – Sabolis

Вот как заставить его работать:

Добавить идентификатор в закладках <ul>, например, так:

<ul id="myTab" class="nav nav-tabs" role="tablist">
нагрузки JQuery и бутстраповских JS в нижней части страницы , до метки </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

Я ответил на свой вопрос.

Я просто добавил активную к каждой вкладке вкладку и установил переполнение в скрытое в CSS.

источник

2014-10-01 18:58:01 Sabolis

Bootstrap 3 вкладки Непереключение активного состояния

ответ

Смежные вопросы