編程挑戰(zhàn)
現(xiàn)在利用之前我們學(xué)過的JavaScript知識(shí)块促，實(shí)現(xiàn)選項(xiàng)卡切換的效果。
效果圖:
image.png
文字素材:
房產(chǎn)：
275萬購(gòu)昌平鄰鐵三居 總價(jià)20萬買一居
200萬內(nèi)購(gòu)五環(huán)三居 140萬安家東三環(huán)
北京首現(xiàn)零首付樓盤 53萬購(gòu)東5環(huán)50平
京樓盤直降5000 中信府 公園樓王現(xiàn)房
家居:
40平出租屋大改造 美少女的混搭小窩
經(jīng)典清新簡(jiǎn)歐愛家 90平老房煥發(fā)新生
新中式的酷色溫情 66平撞色活潑家居
瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)
二手房：
通州豪華3居260萬 二環(huán)稀缺2居250w甩
西3環(huán)通透2居290萬 130萬2居限量搶購(gòu)
黃城根小學(xué)學(xué)區(qū)僅260萬 121平70萬拋!
獨(dú)家別墅280萬 蘇州橋2居優(yōu)惠價(jià)248萬
任務(wù)
大家先思考和分析實(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)卡顯示，其它隱藏酱鸭。
!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>實(shí)踐題 - 選項(xiàng)卡</title>
<style type="text/css">
*{padding:0px;margin: 0px;font:12px normal "microsoft yahei";}
#tabs {width:290px;padding:5px;height:150px;margin:20px;}
#tabs ul{list-style:none;display: block;height:30px;line-height:30px;border-bottom:2px saddlebrown solid;}
#tabs ul li{background:#fff;cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;margin:0px 3px;border:1px solid #aaaaaa;border-bottom:none;display:inline-block;width:60px;text-align: center;}
#tabs ul li.on{border-top:2px solid saddlebrown;border-bottom: 2px solid #fff;}
#tabs div{height:120px;line-height: 25px;border:1px solid #336699;border-top:none;padding:5px;}
.hide{display: none;}
</style>
<script type="text/javascript">
window.onload = function(){
var oTab = document.getElementById("tabs");
var oUl = oTab.getElementsByTagName("ul")[0];
var oLis = oUl.getElementsByTagName("li");
var oDivs= oTab.getElementsByTagName("div");
for(var i= 0,len = oLis.length;i<len;i++){
oLis[i].index = i;
oLis[i].onclick = function() {
for(var n= 0;n<len;n++){
oLis[n].className = "";
oDivs[n].className = "hide";
}
this.className = "on";
oDivs[this.index].className = "";
}
};
}
</script>
</head>
<body>
<div id="tabs">
<ul>
<li class="on">房產(chǎn)</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div>
275萬購(gòu)昌平鄰鐵三居 總價(jià)20萬買一居<br>
200萬內(nèi)購(gòu)五環(huán)三居 140萬安家東三環(huán)<br>
北京首現(xiàn)零首付樓盤 53萬購(gòu)東5環(huán)50平<br>
京樓盤直降5000 中信府 公園樓王現(xiàn)房<br>
</div>
<div class="hide">
40平出租屋大改造 美少女的混搭小窩<br>
經(jīng)典清新簡(jiǎn)歐愛家 90平老房煥發(fā)新生<br>
新中式的酷色溫情 66平撞色活潑家居<br>
瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)<br>
</div>
<div class="hide">
通州豪華3居260萬 二環(huán)稀缺2居250w甩<br>
西3環(huán)通透2居290萬 130萬2居限量搶購(gòu)<br>
黃城根小學(xué)學(xué)區(qū)僅260萬 121平70萬拋!<br>
獨(dú)家別墅280萬 蘇州橋2居優(yōu)惠價(jià)248萬<br>
</div>
</div>
</body>
</html>
