javascript實(shí)現(xiàn)tab切換的四種方法_javascript技巧
來源：懂視網(wǎng)
責(zé)編：小采
時(shí)間：2020-11-27 21:45:15
javascript實(shí)現(xiàn)tab切換的四種方法_javascript技巧
javascript實(shí)現(xiàn)tab切換的四種方法_javascript技巧:tab切換在網(wǎng)頁中很常見，故最近總結(jié)了4種實(shí)現(xiàn)方法。 首先，寫出tab的框架，加上最簡單的樣式，代碼如下： *{ padding: 0; margin: 0; } li{ list-style: none; float:left; } #tabCon{ clear: both; } 標(biāo)
導(dǎo)讀javascript實(shí)現(xiàn)tab切換的四種方法_javascript技巧:tab切換在網(wǎng)頁中很常見，故最近總結(jié)了4種實(shí)現(xiàn)方法。 首先，寫出tab的框架，加上最簡單的樣式，代碼如下： *{ padding: 0; margin: 0; } li{ list-style: none; float:left; } #tabCon{ clear: both; } 標(biāo)
tab切換在網(wǎng)頁中很常見，故最近總結(jié)了4種實(shí)現(xiàn)方法。
首先，寫出tab的框架，加上最簡單的樣式，代碼如下：
標(biāo)題一
標(biāo)題二
標(biāo)題三
標(biāo)題四
內(nèi)容一
內(nèi)容二
內(nèi)容三
內(nèi)容四
現(xiàn)在的顯示效果如下圖：
四個(gè)tab標(biāo)題和四個(gè)內(nèi)容區(qū)都顯示在了頁面中，現(xiàn)在要實(shí)現(xiàn)tab切換效果，即點(diǎn)擊標(biāo)題一，內(nèi)容一顯示出來，其他內(nèi)容不顯示；點(diǎn)擊標(biāo)題二，內(nèi)容二顯示出來，其他內(nèi)容不顯示……
那么，整體思路很簡單，給四個(gè)標(biāo)題綁定事件，觸發(fā)的時(shí)候?qū)?yīng)的內(nèi)容顯示，其他的內(nèi)容隱藏。
方法一：點(diǎn)擊標(biāo)題對應(yīng)的內(nèi)容顯示，非點(diǎn)擊標(biāo)題對應(yīng)的內(nèi)容隱藏。代碼如下：
方法二：先設(shè)置所有內(nèi)容隱藏，然后點(diǎn)擊標(biāo)題對用的內(nèi)容顯示。代碼如下：
該方法的缺點(diǎn)是，不同區(qū)域切換只能通過點(diǎn)擊。
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
javascript實(shí)現(xiàn)tab切換的四種方法_javascript技巧
javascript實(shí)現(xiàn)tab切換的四種方法_javascript技巧:tab切換在網(wǎng)頁中很常見，故最近總結(jié)了4種實(shí)現(xiàn)方法。 首先，寫出tab的框架，加上最簡單的樣式，代碼如下： *{ padding: 0; margin: 0; } li{ list-style: none; float:left; } #tabCon{ clear: both; } 標(biāo)
