jQuery Tabs 標籤式分頁
- #
- jQuery / CSS, 無料Free, 網頁設計
- Date：
- 2020-06-01
一個簡單輕巧的 jQuery 插件，提供基本標籤來做頁面切換。
按這裡下載我們提供的 demo.html 自行編輯修改內容及 js / css 路徑。
35.1 KiB / RAR
❶ 修改頁籤的標題及內容
<div class="tabs-menu">
<div id="tab-1" class="tabs-menu-item active">Tab 1</div>
<div id="tab-2" class="tabs-menu-item">Tab 2</div>
<div id="tab-3" class="tabs-menu-item">Tab 3</div>
</div>
<div class="tabs">
<div class="tab tab-1 current">
Tab 1 Content
</div>
<div class="tab tab-2">
Tab 2 Content
</div>
<div class="tab tab-3">
Tab 3 Content
</div>
</div>
❷ 使用 style.css 來控制顯示和隱藏頁籤內容
.tabs div {
display:none;
}
.tabs div.current {
display:block;
}
❸ 修改 style.css 設定頁籤標題背景色及文字顏色
.tabs-menu div.active {
background:#000000; color:#ffffff;
}
Read More
More Detail
