#item not moving tabs - bootstrap

Question

У меня возникла небольшая проблема с выяснением того, как система вкладок работает в бутстрапе.

У меня есть следующий код:

<div class="tabbable-line"> 
       <ul class="nav nav-tabs "> 
        <li class="active"> 
         <a href="#standings" data-toggle="tab"> 
         Standings </a> 
        </li> 
        <li> 
         <a href="#find_match" data-toggle="tab"> 
         Find Match </a> 
        </li> 
        <li> 
         <a href="#rules" data-toggle="tab"> 
         Rules </a> 
        </li> 
       </ul> 
       <div class="tab-content"> 
        <div class="tab-pane active" id="standings"> 
         <p>First Tab</p> 
        </div> 
        <div class="tab-pane" id="find_match"> 
         <p>Second Tab</p> 
        </div> 
        <div class="tab-pane active" id="rules"> 
         <p>Third Tab</p> 
        </div> 
       </div> 
    </div> 

Это использует якоря, чтобы перемещаться между вкладками, не так ли? Итак, как мне перейти на, например, вкладку три, введя http://url.com/#rules?

Когда я пытаюсь это сделать, он не работает.

Любая помощь была бы высоко оценена!

Answer 1

Bootstrap не использует атрибут href для перемещения по вкладкам. Это относится только к идентификатору div, который будет отображаться, когда мы нажимаем на вкладку. В бутстрапе JS просто найдите data-toggle = "tab" и Tab.prototype.show вы получите представление о том, как вкладка работает в бутстрапе.

Answer 2

Щебет для загрузки в этом случае не делает ничего для вас. Вы можете просто вставить в вашу страницу какой-скрипт:

$(function() { 
    $('.tabbable-line [href="' + location.hash + '"]').tab('show'); 
}); 

Answer 3

Мы можем использовать этот код для навигационного вкладки на основе URL и обновления нажмите URL.

$('.nav-tabs li [href="' + location.hash + '"]').tab('show'); 

$('.nav-tabs li a').click(function(){ 
    window.location.hash = $(this).attr('href'); 
});