Bootstrap 3 вкладки не работают должным образом

Я почти скопировал код с их сайта. Закладка начинается отлично, и когда я нажимаю на вкладки, активируются новые панели. Однако активный актив не применяется к активированной вкладке. Это код:

<ul class="nav nav-tabs">
 <li data-toggle="tab"  data-target="#a" class="active"><a href="#">a</a></li>
  <li data-toggle="tab"  data-target="#b" ><a href="#">b</a></li>
  <li data-toggle="tab"  data-target="#c"  ><a href="#">c</a></li>
</ul>

 <div class="tab-content">
  <div class="tab-pane fade in active" id="a"> in tab a </div>
  <div class="tab-pane fade" id="b">in tab b</div>
  <div class="tab-pane fade" id="c">in tab c</div>
</div>

ОТВЕТЫ

Ответ 1

В соответствии с Документами, вы должны поместить id в каждую ссылку в заголовке, и эта ссылка должна быть внутри li которой не должно быть других стилей, т.е. не требуется весь материал data-target в li. В вашем списке нет ни data-toggle ни id.

Ваш HTML будет таким

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs">
   <li><a href="#a" data-toggle="tab">a</a></li>
   <li><a href="#b" data-toggle="tab">b</a></li>
   <li><a href="#c" data-toggle="tab">c</a></li>
   <li><a href="#d" data-toggle="tab">d</a></li>
</ul>

<div class="tab-content">
   <div class="tab-pane active" id="a">AAA</div>
   <div class="tab-pane" id="b">BBB</div>
   <div class="tab-pane" id="c">CCC</div>
   <div class="tab-pane" id="d">DDD</div>
</div>

Ответ 2

Убедитесь, что ваш jquery вставлен перед файлом bootstrap js:

<script src="jquery.min.js" type="text/javascript"></script>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script src="bootstrap.min.js" type="text/javascript"></script>

Ответ 3

В моем случае у меня есть два элемента с тем же id. Я не мог заметить причину проблемы в течение длительного времени, потому что первый такой элемент был скрыт.

Ответ 4

Моя проблема заключалась в тэге extra </div> внутри первой вкладки.

Ответ 5

Моя проблема заключалась в том, что я полностью завершил загрузку исходной документации. Если вы используете Bootstrap 4, необходимая рабочая маркерная вкладка: http://v4-alpha.getbootstrap.com/components/navs/#javascript-behavior

<ul>
  <li class="nav-item"><a class="active" href="#a" data-toggle="tab">a</a></li>
  <li class="nav-item"><a                href="#b" data-toggle="tab">b</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="a">a</div>
  <div class="tab-pane"        id="b">b</div>
</div>

Ответ 6

Это будет работать

$(".nav-tabs a").click(function(){
     $(this).tab('show');
 });

Ответ 7

по какой-то странной причине вкладки начальной загрузки не помогли мне, пока я не использовал href, например:

<li class="nav-item"><a class="nav-link" href="#a" data-toggle="tab">First</a></li>

но он начал работать, как только я заменил href на data-target, например:

<li class="nav-item"><a class="nav-link" data-target="#a" data-toggle="tab">First</a></li>

Ответ 9

Когда я переместил следующие строки из секции head в конец секции 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.3.7/js/bootstrap.min.js"></script>

Ответ 10

Еще одна вещь, чтобы проверить эту проблему, - это атрибут html tag id. Вы должны проверить, что любые другие теги html на этой странице имеют тот же идентификатор, что и идентификатор вкладки nav.

Ответ 11

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs">
   <li><a href="#a" data-toggle="tab">a</a></li>
   <li><a href="#b" data-toggle="tab">b</a></li>
   <li><a href="#c" data-toggle="tab">c</a></li>
   <li><a href="#d" data-toggle="tab">d</a></li>
</ul>

<div class="tab-content">
   <div class="tab-pane active" id="a">AAA</div>
   <div class="tab-pane" id="b">BBB</div>
   <div class="tab-pane" id="c">CCC</div>
   <div class="tab-pane" id="d">DDD</div>
</div>

Ответ 12

В моем случае (динамическая генерация разделов): проблема заключалась в отсутствии символа "#" в href= "#...".

Ответ 13

Для тех, кто борется с этой проблемой, используя bootstrap3, используйте приведенный ниже список классов. Если вы скопировали копию из DOC, она точно не будет работать. Начало .show в новой версии.

<div class="tab-pane fade in active" >

<div class="tab-pane fade in" >