causeway-standard-theme/causeway/docs/components/tabs.html

<section>
  <a id="tabstrip"></a>
  <header class="content-header">
    <h2 class="title">
      Tabstrip
    </h2>
  </header>

  <p>
    Tabstrips comprise of 2 components the tabs and a series of content containers
  </p>
  <p>
    The tabs and their containers are linked by ensuring the <code>id</code> attribute of the container is referenced in the <code>href</code> attribute of the tab and is unique on the page.
  </p>
  <p>
    A single tab can be set active by adding the class <code>"active"</code> both to it and to the matching container.
  </p>
  <p>
    Any tab can be set as disabled by adding the class <code>"disabled"</code> both to it and to the matching container.
  </p>

  <br/>

  <div>
    <ul class="nav nav-tabs">
      <li>
        <a href="#home" data-toggle="tab">
          Tab 1
        </a>
      </li>
      <li>
        <a href="#profile" data-toggle="tab">
          Tab 2
        </a>
      </li>
      <li class="active">
        <a href="#messages" data-toggle="tab">
          Tab 3
        </a>
      </li>
      <li class="disabled">
        <a href="#settings" data-toggle="tab">
          Tab 4
        </a>
      </li>
    </ul>

    <div class="tab-content">
      <div class="tab-pane" id="home">
        Tab 1 Content
      </div>
      <div class="tab-pane" id="profile">
        Tab 2 Content
      </div>
      <div class="tab-pane active" id="messages">
        Tab 3 Content
      </div>
      <div class="tab-pane disabled" id="settings">
        Tab 4 Content
      </div>
    </div>
  </div>

  <br/>

  <pre>
    <code>
      <span class="title">Tabs</span>
      &lt;ul class=&quot;nav nav-tabs&quot;&gt;
        &lt;li&gt;
          &lt;a href=&quot;#home&quot; data-toggle=&quot;tab&quot;&gt;
            Tab 1
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href=&quot;#profile&quot; data-toggle=&quot;tab&quot;&gt;
            Tab 2
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;active&quot;&gt;
          &lt;a href=&quot;#messages&quot; data-toggle=&quot;tab&quot;&gt;
            Tab 3
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;disabled&quot;&gt;
          &lt;a href=&quot;#settings&quot; data-toggle=&quot;tab&quot;&gt;
            Tab 4
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      <br/>
      <br/>
      <span class="title">Content Containers</span>
      &lt;div class=&quot;tab-content&quot;&gt;
        &lt;div class=&quot;tab-pane&quot; id=&quot;home&quot;&gt;
          Tab 1 Content
        &lt;/div&gt;
        &lt;div class=&quot;tab-pane&quot; id=&quot;profile&quot;&gt;
          Tab 2 Content
        &lt;/div&gt;
        &lt;div class=&quot;tab-pane active&quot; id=&quot;messages&quot;&gt;
          Tab 3 Content
        &lt;/div&gt;
        &lt;div class=&quot;tab-pane disabled&quot; id=&quot;settings&quot;&gt;
          Tab 4 Content
        &lt;/div&gt;
      &lt;/div&gt;
    </code>
  </pre>
</section>