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

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

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

css如圖：

js如圖：

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