整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
選項卡在js中是一個重要的知識點。他沒有那么難，但在工作中卻有重要的位置。幾乎在每一個網站都能看到選項卡的實例。所以今天寫一下選項卡的實現。我們設想有四個按鈕分別來控制四個盒子當我們點擊當前的按鈕的時候，讓對應的盒子顯示，讓其余的盒子隱藏。
點擊選項后變換不同的內容
第一部分
第二部分
謝謝。
迎關注！
Tab(Module-Tabs)，也稱選項卡、頁簽。是指將多個分類內容放置在同一個布局塊內，但每次只有一個分類的內容是可見的，當使用鼠標切換不同分類時，展示不同的內容。tab實現了在一定的空間中展示更多信息的功能，在一個區域內分門別類的展示信息，用戶依據自身需求查看不同內容，同時tab的使用也使得網頁的頁面大小變得更加容易控制，在減小顯示信息密度的同時不會犧牲信息數量。tab在目前的網頁開發中得到了廣泛的運用。
整個tab布局在一個布局元素中，每一頁有標題區和內容區兩部分組成，每一個標題區都有唯一一個與之對應的內容區，通常必須有兩頁以上的分類區域用來切換，通過點擊鼠標或者將鼠標移到標題區進行切換，正在顯示的標題區高亮突出，每一個標題區存在選中和未選中兩個狀態，打開頁面時默認顯示第一個頁面。
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”獲取本文案列全部代碼。
收藏轉發請先關注，謝謝支持！
ello，大家好，暖寶又來給大家帶來javascript干貨，我們開始吧：
上效果圖：
這是一個簡易的tab選項卡
上圖是tab選項卡的代碼：
1.這是選項卡的思路就是用for循環循環遍歷出每個tab按鈕input的默認index，先在點擊每個按鈕的同時讓按鈕的class為空，讓每個按鈕對應的div全部隱藏，然后再讓每個div按照按鈕的index顯示其對應的內容；
2.注意以下幾個問題
1》innerHtml為元素對象放置元素的內容
2》arr[]為數組，arr[0]為元素的第0個元素，依次類推
3》例子代碼中（this.index+1）為優先執行,若寫成this.index+1，不加“（）”，則會依次輸出index和1.
好了，今天的分享結束了，覺得有用的請點擊暖夕H2關注暖寶哦
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
