5. 頁籤 Tabs

頁籤

• <div>加上class="tabs"就變成了頁籤模式
• 若需要垂直頁籤，則<div>改用class="vertical tabs"
• 頁籤分為兩部份：
• 第一部份由<ul>組成，定義有幾個頁籤。
  • 每一組<li><a></a></li>就是一組頁籤。
  • <a>裡面的連結href="#tab-1"會和下方的<div>裡的id互相呼應關聯。
  • 作用中的頁籤在<a>裡面加上class="active"。
  • 或希望頁籤靠右邊，<li>中加上class="pull-right"即可。
• 第二部份由好幾組<div>組成，有幾個頁籤，就有幾組<div>。
  • <div>要定義id，以對應上方頁籤連結位置。
  • 作用中的頁籤在<div>裡面加上class="active"。
  • <div>中要加什麼都可以。

<div class="tabs">
  <ul>
    <li><a href="#tab-1" class="active">頁籤 1</a></li>
    <li><a href="#tab-2">頁籤 2</a></li>
    <li class="pull-right"><a href="#tab-3">頁籤 3</a></li>
  </ul>

  <div id="tab-1" class="active">
    <h1>頁籤 1</h1>
    <p>這是一般的段落文字，總之愛怎麼搞就怎麼搞。</p>
  </div>

  <div id="tab-2">
    <h1>頁籤 2</h1>
    <ul>
      <li>這是無序清單。</li>
      <li>項目要幾項隨便您～</li>
    </ul>
  </div>

  <div id="tab-3">
    <h1>頁籤 3</h1>
    <dl>
      <dt>這是自定義列表</dt>
      <dd>不算很常用，也是清單的一種，只是沒有數字或符號。</dd>
    </dl>
  </div>
</div>