две вкладки уровня jquery

Question

Мне нужно иметь двухуровневую навигацию по вкладкам.

В основном так:

Tab1 Tab2 Tab3

TabA TabB TabC

Когда пользователь нажимает, например, Tab2, он может снова выбрать вкладки 2-го уровня (TabA, TabB и т. Д.).

Я могу сделать первый уровень в порядке, но я не могу сделать 2-й уровень. Как я могу поставить его на вкладках первого уровня.

Answer 1

Просто вложите второй набор вкладок в первый набор внутри html следующим образом:

<div id="tabs">
    <ul>
        <li><a href="#tab-1"><span>One</span></a></li>
        <li><a href="#tab-2"><span>Two</span></a></li>
        <li><a href="#tab-3"><span>Three</span></a></li>
    </ul>
    <div id="tab-1">
      <p>First tab is active by default.</p>
      <p>Second tab contains nested tabs.</p>
    </div>
    <div id="tab-2">
      <!-- Nested Tabs! -->
      <ul>
        <li><a href="#nested-1"><span>One</span></a></li>
        <li><a href="#nested-2"><span>Two</span></a></li>
        <li><a href="#nested-3"><span>Three</span></a></li>
      </ul>
      <div id="nested-1">
        Nest tab 1 content: Onerem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy..
      </div>
      <div id="nested-2">
        Nest tab 2 content: Tworem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy..
      </div>
      <div id="nested-3">
        Nest tab 3 content: Threm ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy..
      </div>
      <!-- End Nested Tabs -->
      Regular tab 2 content (optional)
    </div>
    <div id="tab-3">
        <p>Second tab contains multiple tabs.</p>
    </div>
</div>

.. и инициализируйте их обоих на готовом документе следующим образом:

<script>
  $(document).ready(function() {
    $("#tabs").tabs();
    $("#tab-2").tabs();
  });
</script>

Если есть сомнения, ознакомьтесь с документацией по API вкладок jQuery по адресу http://docs.jquery.com/UI/Tabs