Я хочу изменить активную таблетку / вкладку при загрузке документа. Я знаю, что вы можете установить активную таблетку, как показано ниже, но по другим причинам я хочу изменить ее после загрузки документа. Я пробовал разные части JS, но ничего не работает. Вот HTML и JS (я также пробовал заменить data-toggle = "pill" на data-toggle = "tab" ниже, но все еще не работает).

<div>  
  <ul class="nav nav-pills pillstyle">
    <li class="active tabstyle"><a data-toggle="pill" href="#apple">Apple</a></li>
    <li class="tabstyle"><a data-toggle="pill" href="#banana">Banana</a></li>
    <li class="tabstyle"><a data-toggle="pill" href="#pear">Pear</a></li>
    <li class="tabstyle"><a data-toggle="pill" href="#orange" >Orange</a></li>
  </ul>
</div>  <!-- nav pills close -->

<div class="tab-content">      
  <div id="apple" class="tab-pane fade in active"> `
 .... content of tabs.

JS

$(document).ready(function(){
$('#banana').tab('show');
});

Или

 $(document).ready(function(){
 $('#banana').pill('show');
 });
0
Stu 28 Дек 2015 в 03:05

2 ответа

Лучший ответ

Вам просто нужно изменить свой селектор jQuery, чтобы адресовать элемент a вместо tab-pane div.

$(document).ready(function(){
    $('a[href="#banana"]').tab('show');
});

Если вам нужно, вы можете найти более подробное описание вкладок начальной загрузки в официальной документации.

0
VincenzoC 28 Дек 2015 в 09:33

@Stu Держи.

HTML:

Присвойте элемент UL идентификатор myTab.

  <ul class="nav nav-pills pillstyle" id="myTab">

JS:

$(function () {
     $('#myTab a[href="#banana"]').tab('show');
});

Также обратитесь к документации Bootstrap по выбору различных элементов при загрузке здесь. Это даст вам лучшее понимание. http://getbootstrap.com/2.3.2/javascript.html#tabs

Рабочая демонстрация: https://jsfiddle.net/tf9k9j27/

Примечание: просто для ответа на ваш вопрос методом проб и ошибок

Вы можете активировать навигацию с вкладками или таблетками без написания кода JavaScript, просто указав data-toggle="tab" или data-toggle="pill" для элемента. Добавление классов nav и nav-tabs на вкладку ul применит стиль вкладки Bootstrap. (Из документации начальной загрузки. Прочитайте больше, чтобы получить большую ясность)

0
pratikpawar 28 Дек 2015 в 05:59