:::

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>

 

 

 

 


:::

搜尋

QR Code 區塊

https%3A%2F%2Fwww.tad0616.net%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D29%26tbdsn%3D837

書籍目錄

展開 | 闔起

線上使用者

1人線上 (1人在瀏覽線上書籍)

會員: 0

訪客: 1

更多…