在網(wǎng)頁制作中，頁面有些部分內(nèi)容往往會有很多要展示，而為了頁面美觀或展示位置不夠多，需要類似選項卡切換效果來展示更多的內(nèi)容。
頁面效果如圖：

點(diǎn)擊切換后效果如圖：

html結(jié)構(gòu)如圖：

css如圖：

js如圖：

demo引入了jQuery插件，選項卡切換只寫了三個便于好理解，頂部的導(dǎo)航分類默認(rèn)第一個選中效果（類名on），對應(yīng)下面的內(nèi)容塊第一個（類名on），點(diǎn)擊導(dǎo)航分類時，為當(dāng)前點(diǎn)擊的標(biāo)簽li添加默認(rèn)的類名on（addClass），其余的同級標(biāo)簽li(siblings)刪除類名on(removeClass)，在獲取當(dāng)前點(diǎn)擊的li標(biāo)簽的下標(biāo)（$(this).index()）,通過下標(biāo)值為三個內(nèi)容塊中對應(yīng)的內(nèi)容塊添加類名on（addClass），其余的(siblings)刪除類名on(removeClass)。