頁籤 (Tabs)

新提案
→
封閉測試
→
公開測試
→
已穩定

成熟度說明

新提案：未完成開發、請勿使用。
封閉測試：開發暫時性完成，可使用。可能仍有親和力或其他使用上問題待透過實測發現。
公開測試：開發暫時性完成，歡迎使用。具有完整親和力報告。
已穩定：開發完成、歡迎使用。應無任何親和力或使用上問題。

常見頁籤

Tab 1

Tab 1 Content

This is the content of tab 1.

Tab 2

Tab 2 Content

This is the content of tab 2.

Tab 3

Tab 3 Content

This is the content of tab 3.

Tab 4

Tab 4 Content

This is the content of tab 4.

HTML

    <div class="tabs">
        <input type="radio" class="tabs-radio" name="tabs-group1" id="tab1" checked>
        <label for="tab1" class="tabs-label">Tab 1</label>
        <div class="tabs-content">
            <h4>Tab 1 Content</h4>
            <p>This is the content of tab 1.</p>
        </div>
        <input type="radio" class="tabs-radio" name="tabs-group1" id="tab2">
        <label for="tab2" class="tabs-label">Tab 2</label>
        <div class="tabs-content">
            <h4>Tab 2 Content</h4>
            <p>This is the content of tab 2.</p>
        </div>
        <input type="radio" class="tabs-radio" name="tabs-group1" id="tab3">
        <label for="tab3" class="tabs-label">Tab 3</label>
        <div class="tabs-content">
            <h4>Tab 3 Content</h4>
            <p>This is the content of tab 3.</p>
        </div>
        <input type="radio" class="tabs-radio" name="tabs-group1" id="tab4">
        <label for="tab4" class="tabs-label">Tab 4</label>
        <div class="tabs-content">
            <h4>Tab 4 Content</h4>
            <p>This is the content of tab 4.</p>
        </div>
    </div>

CSS

.tabs：作為全部頁籤的容器。
label .tabs-label：作為頁籤的標題。
.tabs-content：作為頁籤的內容。

親和力

使用 .tabs-label，必要使用 for 連接 <input> 元件中的 id 。