javascript實現(xiàn)網(wǎng)頁中的選項卡（兩種方法）

網(wǎng)頁中經(jīng)常會用到選項卡這種東東，說白了就是點擊一個選項，下面會彈出這個選項里的內(nèi)容。

方法一：

方法一利用簡單的代碼即可實現(xiàn)，以下是全部的代碼；

首先我們在HTML部分定義網(wǎng)頁選項卡中的內(nèi)容。

CSS部分對HTML中的內(nèi)容進行修飾：

最后是最重要的js部分：

JS語句中的第一個for循環(huán)是為了取得所有的選項卡中的點擊部分；因為I這個變量在下面的事件函數(shù)中無法訪問到，所以每次點擊時，i變量循環(huán)到oli.length值。因此將i的值交給一個我們自定義的元素屬性上來保存循環(huán)中i的值，供下面使用。即：oli[i]._index=i;

添加點擊函數(shù)后，第二個for循環(huán)是為了把所有的oli的className改為“空”和所有的op的style為display='none'；循環(huán)結束后，在給當前點擊的這個oli添加className和下面相應的op的style為display='block';

以下是運行的結果：

在編寫程序時一定要注意，選項卡中的點擊部分即：li的數(shù)量（JS里oli.length）要和下面ID為content的p里包含的p數(shù)量（JS里op.length）相同，我在編寫程序時就因為oli.length與op.length不相等，導致程序報錯，但是好長時間都找不到錯誤；總而言之還是要多多細心。

方法二：

方法一適用于選項卡比較少的情況，但如果選項卡內(nèi)容較多時我們要用到這種方法，第二種方法運用到了這周我們老師講的一個在JS種比較重要的知識點：自運行函數(shù)

定義函數(shù)a();給整個函數(shù)帶上括號，后面的括號為輸入?yún)?shù)；

以下為方法二自運行函數(shù)的程序：

和方法一相似先寫HTML里的內(nèi)容，CSS部分對HTML進行修飾，我們直接來看JS部分；

通過添加事件和自運行函數(shù)完成多個選項卡。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com