基于CSS和JavaScript的網(wǎng)頁選項卡的設(shè)計和優(yōu)化

鄭吉鴻，胡靜靜

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

?

·綜合論壇·

基于CSS和JavaScript的網(wǎng)頁選項卡的設(shè)計和優(yōu)化

鄭吉鴻1，胡靜靜2

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

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

關(guān)鍵詞：CSS；JavaScript；選項卡；網(wǎng)頁；HTML

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

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

一、如何設(shè)計網(wǎng)頁選項卡

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

1.整體性原則。Tab中每一張標(biāo)簽和其對應(yīng)的內(nèi)容區(qū)從視覺上看都應(yīng)該是一個整體。將下圖2和圖3比較可以發(fā)現(xiàn)，圖2中，“服飾鞋包選項卡1”的設(shè)計看起來很完整，有關(guān)聯(lián)。而圖3中“服飾鞋包選項卡2”的設(shè)計，標(biāo)簽與內(nèi)容區(qū)被隔離分開，破壞了整體感。

圖1　Tab元素的組成

圖2　服飾鞋包選項卡1

圖3　服飾鞋包選項卡2

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

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

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

二、如何對選項卡進行優(yōu)化

1.選中的標(biāo)簽應(yīng)當(dāng)高亮顯示，通用做法是為未選中狀態(tài)使用統(tǒng)一的背景色，為處于選中狀態(tài)的標(biāo)簽上使用高亮的背景色。也可將選擇和未選中狀態(tài)的標(biāo)簽使用對比鮮明的顏色。如圖2中，當(dāng)前標(biāo)簽為“服飾鞋包”，與其他標(biāo)簽背景有明顯不同。用戶可以直截了當(dāng)?shù)目闯鰠^(qū)別。如圖2中當(dāng)前激活狀態(tài)下的標(biāo)簽為“服飾鞋包”，其他未選中標(biāo)簽的文字顏色和標(biāo)簽背景色有明顯的對比，形成一目了然的標(biāo)簽頁分隔。

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

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

圖4　選項卡默認加載頁面

圖5　選項卡切換后頁面

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

5.內(nèi)容區(qū)的內(nèi)容應(yīng)當(dāng)有適當(dāng)?shù)淖謹(jǐn)?shù)限制， 不要使用滾動條。一旦出現(xiàn)滾動條，不但影響Tab的美觀，更關(guān)鍵的是會給用戶的操作帶來困難。用戶在瀏覽信息時，拖動滾動條的時候很可能會造成標(biāo)簽的切換，引起用戶的操作不便。所以，內(nèi)容區(qū)的內(nèi)容過多時，可以將內(nèi)容精簡，或者調(diào)整內(nèi)容區(qū)的高度，避免滾動條的出現(xiàn)。

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

三、簡單的代碼實現(xiàn)

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

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';

}

}

}

四、 結(jié)語

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

參考文獻：

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

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

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

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

責(zé)任編輯：力草

中圖分類號：TP39

文獻標(biāo)識碼：A

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

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

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

收稿日期：2015-12-01