Javascript之選項卡

項卡

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

點擊選項后變換不同的內(nèi)容

代碼部分

第一部分

第二部分

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

謝謝。

迎關(guān)注！

Tab(Module-Tabs)

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

Tab(Module-Tabs)特點

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

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

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

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

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

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

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

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

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

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

在線咨詢

上一篇：Python CGI編程
下一篇：簡直不要太硬了！一文帶你徹底理解文件系統(tǒng)

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商