項(xiàng)卡

選項(xiàng)卡在js中是一個(gè)重要的知識(shí)點(diǎn)。他沒(méi)有那么難，但在工作中卻有重要的位置。幾乎在每一個(gè)網(wǎng)站都能看到選項(xiàng)卡的實(shí)例。所以今天寫一下選項(xiàng)卡的實(shí)現(xiàn)。我們?cè)O(shè)想有四個(gè)按鈕分別來(lái)控制四個(gè)盒子當(dāng)我們點(diǎn)擊當(dāng)前的按鈕的時(shí)候，讓對(duì)應(yīng)的盒子顯示，讓其余的盒子隱藏。

點(diǎn)擊選項(xiàng)后變換不同的內(nèi)容

代碼部分

第一部分

第二部分

小編比較直接，大家可以先收藏起來(lái)，然后用DW或者sublime敲一遍，遇到的任何問(wèn)題都可以在評(píng)論區(qū)留言，小編會(huì)一一解答。

謝謝。

迎關(guān)注！

Tab(Module-Tabs)

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

Tab(Module-Tabs)特點(diǎn)

整個(gè)tab布局在一個(gè)布局元素中，每一頁(yè)有標(biāo)題區(qū)和內(nèi)容區(qū)兩部分組成，每一個(gè)標(biāo)題區(qū)都有唯一一個(gè)與之對(duì)應(yīng)的內(nèi)容區(qū)，通常必須有兩頁(yè)以上的分類區(qū)域用來(lái)切換，通過(guò)點(diǎn)擊鼠標(biāo)或者將鼠標(biāo)移到標(biāo)題區(qū)進(jìn)行切換，正在顯示的標(biāo)題區(qū)高亮突出，每一個(gè)標(biāo)題區(qū)存在選中和未選中兩個(gè)狀態(tài)，打開頁(yè)面時(shí)默認(rèn)顯示第一個(gè)頁(yè)面。

Tab(Module-Tabs)實(shí)現(xiàn)案列

HTML：在一個(gè)id為tabDiv，class為tab-div的容器中展示tab選項(xiàng)卡，該案列有三個(gè)切換區(qū)域分別為要聞、科技和社會(huì)，內(nèi)容區(qū)域手動(dòng)添加了html，一般內(nèi)容區(qū)域的數(shù)據(jù)都是直接從后臺(tái)調(diào)用過(guò)來(lái)的。在HTML結(jié)構(gòu)中可以清楚的看到標(biāo)題區(qū)、內(nèi)容區(qū)和tab顯示布局元素。

實(shí)現(xiàn)tab選項(xiàng)卡的HTML代碼

CSS：通過(guò)css設(shè)置各個(gè)區(qū)域的顯示樣式，主要有將tab-div和tab元素設(shè)置為相對(duì)定位元素，設(shè)置內(nèi)容區(qū)域的顯示和隱藏狀態(tài)，設(shè)置標(biāo)題區(qū)域選中和未選中的樣式，去除ul列表自帶的顯示效果。

實(shí)現(xiàn)tab選項(xiàng)卡的css代碼

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

實(shí)現(xiàn)tab選項(xiàng)卡的JavaScript代碼

關(guān)注回復(fù)關(guān)鍵詞“tab”獲取本文案列全部代碼。

收藏轉(zhuǎn)發(fā)請(qǐng)先關(guān)注，謝謝支持！

ello，大家好，暖寶又來(lái)給大家?guī)?lái)javascript干貨，我們開始吧：

上效果圖：

這是一個(gè)簡(jiǎn)易的tab選項(xiàng)卡

上圖是tab選項(xiàng)卡的代碼：

1.這是選項(xiàng)卡的思路就是用for循環(huán)循環(huán)遍歷出每個(gè)tab按鈕input的默認(rèn)index，先在點(diǎn)擊每個(gè)按鈕的同時(shí)讓按鈕的class為空，讓每個(gè)按鈕對(duì)應(yīng)的div全部隱藏，然后再讓每個(gè)div按照按鈕的index顯示其對(duì)應(yīng)的內(nèi)容；

2.注意以下幾個(gè)問(wèn)題

1》innerHtml為元素對(duì)象放置元素的內(nèi)容

2》arr[]為數(shù)組，arr[0]為元素的第0個(gè)元素，依次類推

3》例子代碼中（this.index+1）為優(yōu)先執(zhí)行,若寫成this.index+1，不加“（）”，則會(huì)依次輸出index和1.

好了，今天的分享結(jié)束了，覺(jué)得有用的請(qǐng)點(diǎn)擊暖夕H2關(guān)注暖寶哦