項卡

選項卡在js中是一個重要的知識點。他沒有那么難，但在工作中卻有重要的位置。幾乎在每一個網站都能看到選項卡的實例。所以今天寫一下選項卡的實現。我們設想有四個按鈕分別來控制四個盒子當我們點擊當前的按鈕的時候，讓對應的盒子顯示，讓其余的盒子隱藏。

點擊選項后變換不同的內容

代碼部分

第一部分

第二部分

小編比較直接，大家可以先收藏起來，然后用DW或者sublime敲一遍，遇到的任何問題都可以在評論區留言，小編會一一解答。

謝謝。

迎關注！

Tab(Module-Tabs)

Tab(Module-Tabs)，也稱選項卡、頁簽。是指將多個分類內容放置在同一個布局塊內，但每次只有一個分類的內容是可見的，當使用鼠標切換不同分類時，展示不同的內容。tab實現了在一定的空間中展示更多信息的功能，在一個區域內分門別類的展示信息，用戶依據自身需求查看不同內容，同時tab的使用也使得網頁的頁面大小變得更加容易控制，在減小顯示信息密度的同時不會犧牲信息數量。tab在目前的網頁開發中得到了廣泛的運用。

Tab(Module-Tabs)特點

整個tab布局在一個布局元素中，每一頁有標題區和內容區兩部分組成，每一個標題區都有唯一一個與之對應的內容區，通常必須有兩頁以上的分類區域用來切換，通過點擊鼠標或者將鼠標移到標題區進行切換，正在顯示的標題區高亮突出，每一個標題區存在選中和未選中兩個狀態，打開頁面時默認顯示第一個頁面。

Tab(Module-Tabs)實現案列

HTML：在一個id為tabDiv，class為tab-div的容器中展示tab選項卡，該案列有三個切換區域分別為要聞、科技和社會，內容區域手動添加了html，一般內容區域的數據都是直接從后臺調用過來的。在HTML結構中可以清楚的看到標題區、內容區和tab顯示布局元素。

實現tab選項卡的HTML代碼

CSS：通過css設置各個區域的顯示樣式，主要有將tab-div和tab元素設置為相對定位元素，設置內容區域的顯示和隱藏狀態，設置標題區域選中和未選中的樣式，去除ul列表自帶的顯示效果。

實現tab選項卡的css代碼

JavaScript：首先通過getElementById方法和getElementByTagName方法獲取到需要處理的內容區和標題區dom對象，再用for循環遍歷標題dom對象，先將所有標題的樣式抹去（aList[j].className="";）,再為選中的標題區添加樣式讓其顯示出來（this.className=“active”；），最后依據選中的標題區匹配相應的內容區，原理也是先將所有的內容區樣式去除，再將要顯示的匹配標題區的內容區顯示出來。這段腳本中理解起來比較難的是this的使用，兩次使用this均是指向for循環作用域中的aList[i]對象，從而實現標題區與內容區的匹配。

實現tab選項卡的JavaScript代碼

關注回復關鍵詞“tab”獲取本文案列全部代碼。

收藏轉發請先關注，謝謝支持！