線上書籍

頁籤

• <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>