基于CSS和JavaScript的網頁選項卡的設計和優化

鄭吉鴻，胡靜靜

(1.淮北職業技術學院 招生辦, 安徽 淮北　235000；2.淮北職業技術學院 計算機科學技術系，安徽 淮北　235000)

?

·綜合論壇·

基于CSS和JavaScript的網頁選項卡的設計和優化

鄭吉鴻1，胡靜靜2

(1.淮北職業技術學院 招生辦, 安徽 淮北235000；2.淮北職業技術學院 計算機科學技術系，安徽 淮北235000)

摘要：JavaScript 是網頁設計的核心技術之一，也是網頁設計教學的一個重要的模塊。很多網站中都利用JavaScript和CSS，實現了選項卡的使用。網頁選項卡的設計必須遵循設計原則，然后根據實際需要對其進行優化，可以使頁面在有限的空間內展現更多的內容，更便于用戶瀏覽信息，同時可以減少服務器的請求負擔。

關鍵詞：CSS；JavaScript；選項卡；網頁；HTML

CSS是Cascading Style Sheets(層疊樣式表)的簡稱， JavaScript是一種基于對象的直譯式腳本語言，它可以給網頁添加動態功能，實現與用戶的交互。[1]將CSS與JavaScript相結合，可以制作出很多頁面美觀且實用性強的網頁應用。

選項卡也叫Tab，是一種常用的交互元素，它將不同的內容重疊放置在同一布局區塊之中，重疊的內容區里在同一時刻只有其中一層是可見的，實現了小空間，大容量的顯示功能，更加符合現代綜合網頁大信息的布局要求。[2]每個選項卡代表一個活動的區域，用戶將鼠標點擊或移動到標簽上時，會顯示該標簽對應的內容區內容。使用網頁選項卡可以節省頁面空間，提高網頁空間利用率，并能將有關聯的信息分類，便于用戶采納處理。選項卡的實現方法比較多，其實現原理都大致相同。

一、如何設計網頁選項卡

選項卡中的內容分兩大部分，分別是標簽和內容區。標簽是用戶控制切換內容區的操作區域，內容區是Tab元素中重疊的區塊，用于顯示信息內容。[3]為了使用戶在閱讀時更加方便快捷的獲得信息的重點，標簽和內容區在視覺上看起來應該是一個整體。[4]Tab元素的組成部分如圖1所示：網頁選項卡設計應遵循設計原則。

1.整體性原則。Tab中每一張標簽和其對應的內容區從視覺上看都應該是一個整體。將下圖2和圖3比較可以發現，圖2中，“服飾鞋包選項卡1”的設計看起來很完整，有關聯。而圖3中“服飾鞋包選項卡2”的設計，標簽與內容區被隔離分開，破壞了整體感。

圖1　Tab元素的組成

圖2　服飾鞋包選項卡1

圖3　服飾鞋包選項卡2

2.無對比原則。由于Tab的信息是重疊的，也就是說，當用戶選擇了某一個標簽時，當前時刻只能顯示該標簽對應的一層內容區內容。所以，在同一時刻，用戶是無法使用Tab種不同內容區來進行對比的。在進行網頁設計時，如果用戶有對位于不同內容區上的信息進行對比的需求，或者有信息并行的必要，就不應該使用Tab，可以換用表格等其他便于對比的設計方式。

3.簡短性原則。 標簽的內容應該是對應內容區的核心內容的簡短提煉結果。Tab元素的標簽區由多個標簽并列在一起，所以寬度十分有限。標簽區的文字應該是內容區的精簡，能夠準確、簡明地表達內容區內容，長度不超過4～5個漢字。采用這種方式展示信息，既可以保持設計的Tab樣式不會發生變化，還可以讓用戶快速地抓取到核心內容，便于用戶進行下一步操作。

4.精煉性原則。Tab內應該展現的是提煉過的精簡內容，便于用戶快速抓取核心信息。所以，Tab內顯示的內容應是便于用戶信息獲取和處理的摘要或是內容要點，可以采用很多表現形式，可以是表格、數據圖表、圖片，也可以是不超過200字的文字。

二、如何對選項卡進行優化

1.選中的標簽應當高亮顯示，通用做法是為未選中狀態使用統一的背景色，為處于選中狀態的標簽上使用高亮的背景色。也可將選擇和未選中狀態的標簽使用對比鮮明的顏色。如圖2中，當前標簽為“服飾鞋包”，與其他標簽背景有明顯不同。用戶可以直截了當的看出區別。如圖2中當前激活狀態下的標簽為“服飾鞋包”，其他未選中標簽的文字顏色和標簽背景色有明顯的對比，形成一目了然的標簽頁分隔。

2.標簽應在一行內顯示完畢。Tab的標簽可以水平或者垂直排列，一旦標簽內容過長，分布在多行或者多列上，可能會使用戶誤認為標簽中含有樹形的上下級結構，會對Tab中內容理解產生困難，不利于用戶閱讀。標簽的數量不能過多，且標簽上文字不能太長，否則會造成標簽在一行內顯示不完，違背了設計中的簡短性原則，必須將標簽文字精簡提煉出要點內容。

3.內容區的內容加載速度應該很快，頁面剛加載時應該有且僅有一個標簽作為默認標簽，直接顯示內容區內容，其他標簽的內容區可以快速切換，且內容區之間的切換應該跟隨標簽的切換及時跟隨，做到快速無延遲。使用Tab來控制內容切換的基本要求之一快速和互動性。如圖4為該選項卡默認加載時的頁面，圖5為選項卡切換時的頁面。為了達到這一要求，在設計代碼時，不能等到用戶切換到某個標簽后再去遠程載入對應信息，而應該在html代碼里提前內嵌所有內容區的代碼，在加載網頁時將Tab提前載入，并通過CSS/Javascript將未被選中內容區隱藏，這樣，既能快速切換內容區，又能實現Tab的顯示功能。

圖4　選項卡默認加載頁面

圖5　選項卡切換后頁面

4.標簽上使用的文字要概括提取為2-4字的重點。如果標簽項較多，標簽應該設計得盡可能窄，以便在一行列內容內容納盡可能多的標簽。做為標簽的文字應該是對應內容的概括和提煉，讓用戶在瀏覽頁面時能快速獲得他們想要的內容。所以標簽文字的選擇十分重要，要求準確、簡明、無歧義，并有高度的概括性。

5.內容區的內容應當有適當的字數限制， 不要使用滾動條。一旦出現滾動條，不但影響Tab的美觀，更關鍵的是會給用戶的操作帶來困難。用戶在瀏覽信息時，拖動滾動條的時候很可能會造成標簽的切換，引起用戶的操作不便。所以，內容區的內容過多時，可以將內容精簡，或者調整內容區的高度，避免滾動條的出現。

綜上，掌握Tab利用CSS/Javascript在很多軟件中很方便可以實現簡單美觀又實用的網頁選項卡，如DREAMWAVER等軟件。

三、簡單的代碼實現

在代碼編寫，制作選項卡時，需要解決的一個問題，就是在循環中，怎樣將i的值傳遞到事件中，下面的代碼可以實現最簡單的一種選項卡的結構：

window.onload = function(){

var tab = getByClass(document, 'tab')[0];

var tabNav = getByClass(tab, 'tab-nav');

var tabCon = getByClass(tab, 'tab-content');

for(var i = 0; i < tabNav.length; i++){

tabNav[i].index = i;//此處通過添加自定義屬性index來保存i的值

tabNav[i].onclick = function(){

for(var i = 0; i < tabNav.length; i++){

removeClass(tabNav[i], 'active');

}

addClass(this, 'active');

tabCon[this.index].style.display = 'block';

}

}

}

四、 結語

網頁選項卡的使用十分靈活，標簽的設計可以用各種背景色，可以使用文字或者圖片。現在，各種代碼的編寫方法也非常多，CSS/Javascript可以使網頁十分美觀，便利。只要遵循上述原則，就可以設計出實用方便的網頁選項卡。

參考文獻：

[1]張紅琴，白林如.基于CSS和JavaScript的網頁選項卡的設計和實現[J].洛陽理工學院學報：自然科學版，2012(3).

[2]羅威,陳偉.基于模板和CSS技術的Web頁面定制[J].計算機應用研究,2008,25(7).

[3]曾順.精通CSS+DIV網頁樣式與布局[M].北京:人民郵電出版社,2007.

[4]葉青.HTML+CSS+JavaScript實用詳解[M].北京:電子工業出版社,2008.

責任編輯：力草

中圖分類號：TP39

文獻標識碼：A

文章編號：1671-8275(2016)02-0129-02

作者簡介：1.鄭吉鴻(1982-),男，安徽淮北人，講師，碩士，研究方向為計算機網絡技術;2.胡靜靜(1982-)，女，安徽淮南人，講師，碩士，研究方向為計算機網絡技術。

基金項目：本文系安徽省質量工程專業綜合改革試點項目(編號：2015zy095)與淮北職業技術學院教科研項目“高職院校JavaScript動態網頁實例教學”(編號：2013jxxm-13)階段性研究成果。

收稿日期：2015-12-01