現(xiàn)在利用之前我們學(xué)過(guò)的JavaScript知識(shí)，實(shí)現(xiàn)選項(xiàng)卡切換的效果。
效果圖:
文字素材:
房產(chǎn)：
275萬(wàn)購(gòu)昌平鄰鐵三居 總價(jià)20萬(wàn)買(mǎi)一居
200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)
北京首現(xiàn)零首付樓盤(pán) 53萬(wàn)購(gòu)東5環(huán)50平
京樓盤(pán)直降5000 中信府 公園樓王現(xiàn)房
家居:
40平出租屋大改造 美少女的混搭小窩
經(jīng)典清新簡(jiǎn)歐愛(ài)家 90平老房煥發(fā)新生
新中式的酷色溫情 66平撞色活潑家居
瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)
二手房：
通州豪華3居260萬(wàn) 二環(huán)稀缺2居250w甩
西3環(huán)通透2居290萬(wàn) 130萬(wàn)2居限量搶購(gòu)
黃城根小學(xué)學(xué)區(qū)僅260萬(wàn) 121平70萬(wàn)拋!
獨(dú)家別墅280萬(wàn) 蘇州橋2居優(yōu)惠價(jià)248萬(wàn)
大家先思考和分析實(shí)現(xiàn)思路，然后在動(dòng)手實(shí)現(xiàn)
一、HTML頁(yè)面布局
提示: 選項(xiàng)卡標(biāo)題使用ul..li 選項(xiàng)卡內(nèi)容使用div
二、CSS樣式制作
提示: 整個(gè)選項(xiàng)卡的樣式設(shè)置 選項(xiàng)卡標(biāo)題的樣式設(shè)置 選項(xiàng)卡內(nèi)容的樣式設(shè)置 一開(kāi)始只顯示一個(gè)選項(xiàng)卡內(nèi)容，其它選項(xiàng)卡內(nèi)容隱藏。
三、JS實(shí)現(xiàn)選項(xiàng)卡切換
提示: 獲取選項(xiàng)卡標(biāo)題和選項(xiàng)卡內(nèi)容 選項(xiàng)卡內(nèi)容多個(gè)，需要循環(huán)遍歷來(lái)操作，得知哪個(gè)選項(xiàng)卡和哪個(gè)選項(xiàng)內(nèi)容匹配 通過(guò)改變DOM的css類(lèi)名稱(chēng),當(dāng)前點(diǎn)擊的選項(xiàng)卡顯示，其它隱藏。
HTML代碼:
css樣式式:
JS代碼:
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
打開(kāi)微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書(shū)簽
舉報(bào)
