javascript實現(xiàn)tab切換的四種方法_javascript技巧

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 21:45:15

javascript實現(xiàn)tab切換的四種方法_javascript技巧

javascript實現(xiàn)tab切換的四種方法_javascript技巧:tab切換在網(wǎng)頁中很常見，故最近總結(jié)了4種實現(xiàn)方法。首先，寫出tab的框架，加上最簡單的樣式，代碼如下： *{ padding: 0; margin: 0; } li{ list-style: none; float:left; } #tabCon{ clear: both; } 標

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀javascript實現(xiàn)tab切換的四種方法_javascript技巧:tab切換在網(wǎng)頁中很常見，故最近總結(jié)了4種實現(xiàn)方法。首先，寫出tab的框架，加上最簡單的樣式，代碼如下： *{ padding: 0; margin: 0; } li{ list-style: none; float:left; } #tabCon{ clear: both; } 標

tab切換在網(wǎng)頁中很常見，故最近總結(jié)了4種實現(xiàn)方法。
首先，寫出tab的框架，加上最簡單的樣式，代碼如下：


 
 


 
 
 
 
 
 標題一
 標題二
 標題三
 標題四
 
 
 
 內(nèi)容一
 內(nèi)容二
 內(nèi)容三
 內(nèi)容四

現(xiàn)在的顯示效果如下圖：

四個tab標題和四個內(nèi)容區(qū)都顯示在了頁面中，現(xiàn)在要實現(xiàn)tab切換效果，即點擊標題一，內(nèi)容一顯示出來，其他內(nèi)容不顯示；點擊標題二，內(nèi)容二顯示出來，其他內(nèi)容不顯示……
那么，整體思路很簡單，給四個標題綁定事件，觸發(fā)的時候?qū)?yīng)的內(nèi)容顯示，其他的內(nèi)容隱藏。

方法一：點擊標題對應(yīng)的內(nèi)容顯示，非點擊標題對應(yīng)的內(nèi)容隱藏。代碼如下：

方法二：先設(shè)置所有內(nèi)容隱藏，然后點擊標題對用的內(nèi)容顯示。代碼如下：

該方法的缺點是，不同區(qū)域切換只能通過點擊。

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