天天看點

JavaScript效果之頁籤

拼了命學習js,想把學到的Javascript效果,可以記在部落格裡,在記錄過程中,加深了解。

gogogo,第一個效果,頁籤。

一、頁籤效果的實作思路

頁籤效果的應用很廣泛,幾乎所有的網站都會用到頁籤,現在就來寫頁籤。

頁籤的實作思路:

 兩個div,一個用來放在頁籤,一個用來放置每個頁籤内容。

首先,先把放置内容的div隐藏起來display:none,隻保留一個顯示display:block。

然後,通過點選頁籤,在該添加類的位置上添上屬性類。

二、實作

我寫的這個頁籤界面特“簡潔”,隻有說明頁籤該如何寫。start~~~

截圖:

JavaScript效果之頁籤

上面的Javascript函數,通過一個for循環,來判斷使用者點選的是哪一個頁籤,然後便擷取該頁籤元素。這裡的處理是:document.getElementById('one'+i); 

擷取到的會是id = one1/one2/on3,然後判斷,i == carsel?"hover":"";   此時循環的 i   是否會等于遊标值,會的話就添加一個hover類上去,改變被點選項的樣式。

同樣,下面的語句:oContent.style.display = i ==carsel?"block":"none";給目前被點選的選項,設定display為block,即顯示出來。

三、完整代碼

JavaScript效果之頁籤
JavaScript效果之頁籤

View Code

 四、

補充:

用一個參數來實作

繼續閱讀