Вкладки бутстрапа Не позволяя мне изменить ID

Хорошо, я создаю приложение с вкладками Bootstrap. У меня есть все .js-файлы, которые Twitter Bootstrap может предложить в моей голове.Вкладки бутстрапа Не позволяя мне изменить ID

Когда я добавить вкладки, как это работает

<ul class="nav nav-tabs" data-tabs="tabs" id="myTab"> 
    <li class="active"><a href="#tab1">Post Update</a></li> 
    <li><a href="#tab2">Post Photos</a></li> 
    <li><a href="#tab3">Post Video</a></li> 
    <li><a href="#tab4">Create a Poll</a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane active" id="tab1">Test 1</div> 
    <div class="tab-pane" id="tab2">Test 2</div> 
    <div class="tab-pane" id="tab3">Test 3</div> 
    <div class="tab-pane" id="tab4">Test 4</div> 
</div> 
<script> 
    $(function(){ 
     $('#myTab a:last').tab('show'); 
    }); 
</script>

Но с другой стороны, когда я изменить идентификатор на вкладках в моем JavaScript и HTML, он не работает больше ...

<ul class="nav nav-tabs" data-tabs="tabs" id="changedID"> 
    <li class="active"><a href="#tab1">Post Update</a></li> 
    <li><a href="#tab2">Post Photos</a></li> 
    <li><a href="#tab3">Post Video</a></li> 
    <li><a href="#tab4">Create a Poll</a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane active" id="tab1">Test 1</div> 
    <div class="tab-pane" id="tab2">Test 2</div> 
    <div class="tab-pane" id="tab3">Test 3</div> 
    <div class="tab-pane" id="tab4">Test 4</div> 
</div> 
<script> 
    $(function(){ 
     $('#changedID a:last').tab('show'); 
    }); 
</script>

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

источник

2013-08-30 user2731597

вы измените ' a''s href тоже? –

Просто догадайтесь, но вы дублируете идентификаторы где-то? Проверьте несколько экземпляров 'changedID' и/или' tab1' через 'tab4' – Phil

Работает для меня: [jsFiddle] (http://jsfiddle.net/Regisc/KqpmJ/) –

Попробуйте добавить данные рычажками = «закладка», чтобы ваши ссылки, и убедитесь, что второй набор вкладок на странице имеют разные идентификаторы

http://jsfiddle.net/JqGt9/1/

<div class="container"> 
<ul class="nav nav-tabs" id="myTab"> 
    <li class="active"><a href="#tab1" data-toggle="tab">Post Update</a></li> 
    <li><a href="#tab2" data-toggle="tab">Post Photos</a></li> 
    <li><a href="#tab3" data-toggle="tab">Post Video</a></li> 
    <li><a href="#tab4" data-toggle="tab">Create a Poll</a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane active" id="tab1">Test 1</div> 
    <div class="tab-pane" id="tab2">Test 2</div> 
    <div class="tab-pane" id="tab3">Test 3</div> 
    <div class="tab-pane" id="tab4">Test 4</div> 
</div> 
</div> 
<div class="container"> 
<ul class="nav nav-tabs" id="myTab2"> 
    <li class="active"><a href="#tab5" data-toggle="tab">Post Update</a></li> 
    <li><a href="#tab6" data-toggle="tab">Post Photos</a></li> 
    <li><a href="#tab7" data-toggle="tab">Post Video</a></li> 
    <li><a href="#tab8" data-toggle="tab">Create a Poll</a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane active" id="tab5">Test 5</div> 
    <div class="tab-pane" id="tab6">Test 6</div> 
    <div class="tab-pane" id="tab7">Test 7</div> 
    <div class="tab-pane" id="tab8">Test 8</div> 
</div> 
</div>

источник

2013-08-30 05:26:22 rolfsf

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

Правда, идентификатор на .nav-вкладках несколько не имеет значения. Настоящий ключ является уникальным идентификатором для каждой .tab-панели. Более одного экземпляра идентификатора на странице могут иметь непредсказуемые последствия. – rolfsf

Try this format. 

<ul class="nav nav-tabs" id="myTab"> 
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li> 
<li><a href="#tab2" data-toggle="tab">Section 2</a></li> 
</ul> 
<div class="tab-content"> 
<div class="tab-pane active" id="tab1"> 
<p>I'm in Section 1.</p> 
</div> 
<div class="tab-pane" id="tab2"> 
<p> I'm in Section 2.</p> 
</div> 
</div> 


---------- 
$('#myTab a').click(function (e) { 
    e.preventDefault(); 
    $(this).tab('show'); 
})

источник

2013-08-30 05:25:15

Вкладки бутстрапа Не позволяя мне изменить ID

ответ

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