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

Я почти скопировал код со своего сайта. Закладка начинается отлично, и когда я нажимаю на вкладки, активируются новые панели. Однако активный актив не применяется к активированной вкладке. Это код: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>

источник

2014-01-04 friendq

Согласно Docs вам нужно положить 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>

И вам не нужно какой-либо Javascript, согласно Docs

источник

2014-01-04 05:52:50

все еще не работает. – FastZhong

да ** это для работы для меня ** проверить [W3 школы] (http://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp) – stom

в этом месте, где я должен добавить ссылку, потому что для моего дела это не перейдя на соответствующую страницу, он просто активирует для этого li – sourav78611

Убедитесь, что JQuery будет вставлен Bootstrap файл расслоения плотного :

<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>

источник

2014-10-19 02:01:21 Azmeer

моя проблема устранена этим решением. jquery.js необходимо вставить перед файлом bootstrap.js. –

все еще не работает – aaron

Это решило мою проблему. Спасибо) –

My проблема была дополнение</div> бирка внутри первая таба.

источник

2015-06-10 13:38:35 OldTrain

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

источник

2015-10-03 12:56:21 Tsutomu

У меня была такая же проблема !!! Настолько расстраивать тратить так много времени, пытаясь отлаживать что-то, когда оно просто сходит на одно имя для двух элементов. –

Спасибо Tsutomu, что вы меня тоже нашли. +1 – Craigoh1

Моя проблема заключалась в том, что я окончательно завершил документацию по начальной загрузке.
Если вы используете Bootstrap 4, необходимая рабочая вкладка markub является: 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>

источник

2016-10-07 20:38:48 lakesare

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

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

источник

2016-11-25 08:06:46 Prem

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

источник

2017-04-04 12:07:01

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

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

но он начал работать, как только я заменил HREF с данными-мишени, как: -

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

источник

2018-02-15 13:06:35

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

ответ

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