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