Twitter bootstrap 3 вкладка

Я хочу иметь вкладку с использованием твитер-бутстрапа 3:

http://jsfiddle.net/K9LpL/2/

<ul class="nav nav-tabs">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
</ul>

    <div id='content' class="tab-content">
      <div class="tab-pane active" id="home">
        <ul>
            <li>home</li>
            <li>home</li>
            <li>home</li>
            <li>home</li>
            <li>home</li>
            <li>home</li>
            <li>home</li>
        </ul>
      </div>
      <div class="tab-pane" id="profile">
        <ul>
            <li>profile</li>
            <li>profile</li>
            <li>profile</li>
            <li>profile</li>
            <li>profile</li>
            <li>profile</li>
            <li>profile</li>
        </ul>
      </div>
      <div class="tab-pane" id="messages">
      </div>
      <div class="tab-pane" id="settings"></div>
    </div>

Этот код для меня не работает. Большинство примеров в сети не относятся к третьей версии. Было бы здорово, если кто-нибудь скажет мне, в чем моя проблема, или даже давая мне стандартный рабочий пример (с бутстрапом 3).

Ответы

Ответ 1

Вы можете активировать вкладку с помощью data-toggle без js или с помощью js, как показано ниже. Для получения дополнительной информации см. Документацию .

Смотрите Fiddle Добавьте id myTab в ul и запустите это ниже js

JS

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

Ответ 2

Вы забыли атрибут data-toggle в своих ссылках.

<ul class="nav nav-pills">
  <li class="active"><a href="#home" data-toggle="pill">Home</a></li>
  <li><a href="#profile" data-toggle="pill">Profile</a></li>
   <li><a href="#messages" data-toggle="pill">Messages</a></li>
</ul>

Fiddle: http://jsfiddle.net/jofrysutanto/K9LpL/3/

Это также в документации Bootstrap 3.0: http://getbootstrap.com/javascript/#tabs

Обновление

Как описано в комментарии, data-toggle="pill" и data-toggle="tab" могут использоваться взаимозаменяемо, зависит от стиля, который вы используете.

Вы можете активировать навигацию табуляции или таблеток, не набирая никаких JavaScript, просто указав в элементе данные-toggle = "tab" или data-toggle = "pill". Добавление классов nav и nav-tabs на вкладке ul будет применять стиль закладки Bootstrap, в то время как добавление классов nav и nav-pills будет применять стилирование таблеток.