Dynamicaly открывает несколько вкладок

Question

Я использую bootstrap и jQuery для динамического управления вкладками на моем веб-сайте. До сих пор каждая кнопка была нацелена только на один элемент, но я хочу настроить таргетинг на несколько.

Вот немного моего кода:

<!-- Dynamic Tabs controller --> 
<script> 
$(document).ready(function() { 
    $(".nav-tabs a").click(function() { 
    $(this).tab('show'); 
    }); 
}); 
</script> 

<!-- Navigation Tabs --> 
<ul class="nav nav-tabs"> 
    <li class="active"> 
    <a href="#staff"> 
    </li> 
    <li> 
    <a href="#tech"> 
    </li> 
</ul> 

<!-- Elements to show --> 
<div id="staff" class="tab-pane fade"></div> 
<div id="tech" class="tab-pane fade"></div> 

Теперь, как я открываю как сотрудников, так и технологий, нажав на одной вкладке навигации?

Answer 1

Хорошо, мне удалось решить это самостоятельно. Я отправлю ответ, чтобы помочь другим, которые ищут одно и то же решение.

Трюк должен был использовать data-target.

Вот измененный код:

<!-- Navigation Tabs --> 
<ul class="nav nav-tabs"> 
    <li class="active"> 
    <a href="#staff" data-target="#staff, #tech"> 
    </li> 
</ul> 

Теперь, когда я нажимаю на кнопку персонала, персонала и технологий вкладки открываются.

Answer 2

Попробуйте изменить это:

$(this).tab('show'); 

To:

$("#staff, #tech").tab('show'); 

Вы можете узнать о концепции this в JavaScript here, получить документацию для этого boostrap function here (выделите вкладки), а также узнать о jQuery's multiple selector syntax here, который представляет собой список селекторов, разделенных запятыми.