在網頁設計中，選項卡組件用于在一組不同元素之間切換視角，可以通過單擊每個元素的標題來訪問該元素包含的內容，這些標題在設計網頁時都作為獨立的選項卡而出現。每個元素，或者說每個內容片斷都具有一個與之關聯的選項卡，并且在同一時刻只能夠打開其中一個內容片斷。
【操作步驟】
第1步，啟動Dreamweaver，打開本節示例中的orig.html文件，另存為effect.html。在本示例中將在頁面中插入一個Tab選項卡，設計一個Tab面板切換版面，當鼠標經過時，會自動切換表單面板。
第2步，把光標置于頁面所在位置，然后選擇【插入】|【jQuery UI】|【Tabs】命令，在頁面當前位置插入一個Tabs面板。
第3步，使用鼠標單擊選中Tabs面板，可以在【屬性】面板中設置選項卡的相關屬性，同時可以在編輯窗口中修改標題名稱并填寫面板內容。
（1）ID文本框：設置Tab選項卡外包含框div元素的ID屬性值，以方便JavaScript腳本控制。
（2）【面板】列表框：在這里顯示選項卡中每個選項標題的名稱，可以單擊和按鈕圖標調整選項顯示的先后位置，單擊按鈕可以增加一個選項，而單擊按鈕可以減少一個選項。
（3）Active文本框：設置在默認狀態下顯示的選項，第一個選項值為0，第二個選項值為1，依此類推。
（4）Event下拉列表框：設置選項卡響應事件，包括click（鼠標單擊）和mouseover（鼠標經過）。
（5）Height Style下拉列表框：設置內容框的高度，包括fill（固定高度）、content（根據內容確定高度）和auto（自動調整）。
（6）Disabled復選框：是否禁用選項卡。
（7）Collapsible復選框：是否可折疊選項卡。默認選項是false，不可以折疊。如果設置為true，允許用戶單擊可以將已經選中的選項卡內容折疊起來。
（8）Hide和Show下拉列表框：設置選項卡隱藏和顯示時的動畫效果，可以參閱下面小節關于jQuery特效介紹。
（9）Orientation下拉列表框：設置選項卡標題欄是在頂部水平顯示（horizontal），還是在左側堆疊顯示（vertical）。
第4步，保存文檔，則Dreamweaver會彈出對話框，要求保存相關的技術支持文件。單擊【確定】按鈕關閉該對話框即可。
第5步，在內容框中分別輸入內容，這里插入表單截圖。
第6步，切換到代碼視圖，在<head>標簽中添加<style type="text/css">標簽，定義一個內部樣式表，然后定義兩個樣式，修改Tab選項卡默認的樣式，其中#Tabs1 > div定義選項卡容器樣式，清除容器包含框的邊界和補白，避免默認的邊界對包含內容的影響。#Tabs1 > ul > li > a用來控制Tab選項卡標題欄字體大小和左右補白，以便適應當前頁面的欄目布局。
#Tabs1 > div {
padding:0;
margin:0;}
#Tabs1 > ul > li > a{
font-size:14px;
padding-left:8px;
padding-right:8px;}
第7步，按Ctrl+S快捷鍵保存文檔，然后按F12鍵預覽。
提示：在網站建設時，選項卡組件是基于底層的HTML元素結構，該結構是固定的，組件的運轉依賴一些特定的元素。選項卡本身必須從列表元素中創建，列表結構可以是排序的，也可以是無序的，并且每個列表項應當包含一個span元素和一個a元素。每個鏈接還必須具有相應的div元素，與它的href屬性相關聯。例如：
<ul>
<li><a href="#tabs"><span>標題</span></a></li>
</ul>
<div id="tabs1">Tab面板容器 </div>
對于該組件來說，必要的CSS樣式是必需的，默認可以導入jquery.ui.all.css文件，或者jquery.ui.tabs.css，也可以自定義CSS樣式表，用來控制選項卡的基本樣式。一套選項卡面板包括了幾種以特定方式排列的標準HTML元素，根據實際需要可以在頁面中編寫好，也可以動態添加，或者兩者結合。
?列表元素（ul或ol）。
?a元素。
?span元素。
?div元素。
前3個元素組成了可單擊的選項標題，以用來打開選項卡所關聯的內容框，每個選項卡應該包含一個帶有鏈接的列表項，并且鏈接內部還應嵌套一個span元素。每個選項卡的內容通過div元素創建，其id值是必需的，標記了相應的a元素的鏈接目標。
當前文章標題：在網頁設計中制作選項卡
當前URL：http://www.free-network.cn/news/wzzz/3128.html
上一篇：在網頁設計中制作彈跳的小球
下一篇：在網頁設計中設計模態對話框
