頁籤-動態改變CSS樣式 @ 男丁格爾 in Xuite

2006-02-22 14:35 頁籤-動態改變CSS樣式

什麼是頁籤？各位可以對著桌面的IE點右鍵並選擇內容，接著就會開啟網際網路內容的視窗，仔細看這視窗上面那一排的部份(下圖中的藍色矩形)，可自由的切換來切換去的，每個都有自己的畫面，這就是頁籤了。

再不懂的話，可以到Yahoo!奇摩去看看，在它的搜尋的功能中，可以切換不同的搜尋項目，這也是種頁籤的應用。

說了那麼多就只是想讓不知道什麼叫頁籤的人了解一下罷了，因為接下來的就是要教各位怎樣做出頁籤的功能來。

這種功能說難也還好，就是JavaScript+CSS的運用而已；說簡單也不簡單，要做的美觀的話，可能要下一翻功夫(我是美術白癡)。

讓我們直接進入主題吧。

先看CSS的部份：

在CSS中，border可以設定元素的框線的部份，且還能細分border-top、border-bottom、border-left及border-rright，每一個屬性都還能再設定寬度、樣式還有顏色。所以border: 1px solid #7D7D7D;就是表示四邊都有顏色為#7D7D7D且寬為1px的實線框；border-bottom: none;則表示不要有下框線。width就是設定元素的寬部，cursor則設定滑鼠在該元素上的樣式。

接著看Body的部份：

先放一個Table且設定它的寬為400，並拿掉框線等，然後裡面是有一列(TR)五行(TD)，然後除了第一個TD的class設為active外，其它的設為inactive，最後一格則不用(裝飾用)，且每一格在click時都會觸發showLayer()函式。

再來先簡單的解說一下display的用法。若display的值為block的話，該元素則會顯現出來；若值為none的話，該元素則會被隱藏起來。所以一開始的時候，第一個DIV的display值設為block來顯現，其它的就先設為none來隱藏起來。

先看一下目前經過這樣設計的畫面：

嘿嘿~開始有點像頁籤的樣式了厚。接的再來看JavaScript：

currentLayer是用來存放作用中頁籤的ID用。currentDiv則是用來存放作用中頁籤所對應的Div的ID用。showIt()函式需要三個參數：第一個是頁籤的ID，第二個是頁面的ID、第三個是模式。比較重要的是要改變元素的class是要用className屬性。showLayer()函式則會比對currentLayer是否等於所傳入的元素的ID，若不相等的話，那就表示使用者點了其它頁籤了。所以一開始先呼叫showIt()把原先作用中的頁籤及頁面都隱藏起來，再重新指定currentLayer跟currentDiv的值，最後再呼叫showIt()來顯示目前作用中的頁籤及頁面。

整個的JavaScript其實很簡單，只要知道怎樣改變元素的class就可以了，其它就是CSS的設計。

若要讓每個頁籤都有顏色且顏色都不一樣的話呢？做法有很多種，我們先來試比較簡單的方法。

CSS的部份可以不用動。Body的部份，就先在第一個頁籤及頁面加上background-color的設定，並在頁籤觸發showLayer()函式時多傳一個索引的參數。

而JavaScript：

多了一個defaultColor儲存若未作用中時的顏色。colorArray陣列是用來存放每一個頁籤的顏色。showLayer()函式多了一個顏色索引值的參數，並把這值傳給showIt()函式，這樣才知道要取用colorArray陣列中的那一個值來當做背景顏色。

這樣就可以了！雖然沒Yahoo!奇摩那樣有質感(我天份不夠)，但至少精神有學到了。若要做到像Yahoo!奇摩一樣的話，可以考慮每一個頁籤及頁面都有自己的CSS樣式，然後用一個陣列把這些CSS樣式的名稱給儲存起，再用像剛剛改變顏色的方式來去加以運用。

而每一個Div頁面內要擺放什麼就看各位怎樣去發揮了！

範例瀏覽：

http://abgne.myweb.hinet.net/0023/0023_1.html