拼了命學習js,想把學到的Javascript效果,可以記在部落格裡,在記錄過程中,加深了解。
gogogo,第一個效果,頁籤。
一、頁籤效果的實作思路
頁籤效果的應用很廣泛,幾乎所有的網站都會用到頁籤,現在就來寫頁籤。
頁籤的實作思路:
兩個div,一個用來放在頁籤,一個用來放置每個頁籤内容。
首先,先把放置内容的div隐藏起來display:none,隻保留一個顯示display:block。
然後,通過點選頁籤,在該添加類的位置上添上屬性類。
二、實作
我寫的這個頁籤界面特“簡潔”,隻有說明頁籤該如何寫。start~~~
截圖:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIn5GcuY2NhFGOjJGZ2ImY2UTY0YGN3ATYzQzN0IWZ2M2MwYWZfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.png)
上面的Javascript函數,通過一個for循環,來判斷使用者點選的是哪一個頁籤,然後便擷取該頁籤元素。這裡的處理是:document.getElementById('one'+i);
擷取到的會是id = one1/one2/on3,然後判斷,i == carsel?"hover":""; 此時循環的 i 是否會等于遊标值,會的話就添加一個hover類上去,改變被點選項的樣式。
同樣,下面的語句:oContent.style.display = i ==carsel?"block":"none";給目前被點選的選項,設定display為block,即顯示出來。
三、完整代碼
View Code
四、
補充:
用一個參數來實作