Tad 教材網 - 線上書籍

:::

Groundwork CSS
==============

###  頁籤

- <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>中要加什麼都可以。
 
 ```
<pre class="brush:xml;">
<div class="tabs">
  <ul>
    <li><a href="#tab-1" class="active">頁籤 1</a></li>
    <li><a href="#tab-2">頁籤 2</a></li>
    <li<span><span class="attribute-name"> class</span>="<a class="attribute-value">pull-right</a>"</span>><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>
```

:::