JavaScript原生實現Tab選項卡各類切換效果

提起tab選項卡，估計作web開發的小夥伴們都不陌生，這個功能也是一個經常使用功能，今天就帶你們一塊兒來實現它。

效果圖

1、Tab切換類型

• 滑過切換

• 點擊切換

• 延遲切換

• 自動切換

基本HTML結構：

這裏要注意，標籤的數量和要切換顯示的內容div數目要一致。

CSS這裏不作概述，請你們自行發揮嘍。

2、滑過切換效果

鼠標滑過的第N個元素添加class爲select樣式，其他節點移除select樣式。

同理，下面的notice-con中的第N個元素顯示，其他隱藏。

鼠標滑動切換

2、點擊切換效果

只須要將上面的onmouseover事件更改成click事件便可，就實現了點擊的時候切換的效果：

點擊切換效果

3、延遲切換效果

其實所謂的延遲就是增長一個定時器：setTimeout來實現延遲效果。

延遲切換效果

4、自動切換效果

其實所謂的自動切換就是增長一個定時器：setInterval來不斷的改變li的索引。

自動切換效果

4、自動切換的基礎上加入手動切換

自動切換的過程當中，當鼠標滑過某個li的時候，也能實現切換的效果，當鼠標離開的時候還能繼續自動切換：

自動切換+手動切換

以上代碼是通過了函數封裝，定時器優化後的，同窗們能夠根據本身的思路先實現功能，而後再看哪些是重複的代碼，重複的內容是否能夠封裝成函數。

留個小做業，tab切換的效果能夠實現了，輪播圖的切換效果是否是本身也能實現呢？動手試試吧，明天揭曉答案。

博客園的前端羣：640633433

歡迎你們關注個人微信號公衆號，公衆號名稱：web前端EDU。掃下面的二維碼或者收藏下面的二維碼關注吧（長按下面的二維碼圖片、並選擇識別圖中的二維碼）