                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進(jìn)階篇

選項(xiàng)卡切換內(nèi)容全沒了

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實(shí)踐題?-?選項(xiàng)卡</title>
????<style?type="text/css">
?????/*?CSS樣式制作?*/??
????????*{?font:12px?normal?"microsoft?yahei";
????????????padding:0px;
????????????margin:0px;
????????}
????????#tabs{?width:290px;
????????????????height:150px;
????????????????padding:5px;
????????????????margin:20px;
???????????????
????????}
????????#tabs?ul{?list-style:none;
????????????????display:block;
????????????????height:30px;
????????????????line-height:30px;
????????????????border-bottom:2px?solid?saddlebrown;
????????}
????????#tabs?ul?li{?background:#fff;
????????????????cursor:pointer;
????????????????float:left;
????????????????list-style:none;
????????????????height:28px;
????????????????line-height:28px;
????????????????margin:0px?3px;
????????????????border:1px?solid?#aaa;
????????????????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-bottom:1px?solid?#336699;
????????????????border-top:none;
????????????????border-right:1px?solid?#336699;
????????????????border-left:1px?solid?#336699;
????????????????padding:5px;
????????}
????????.hide{?display:none;}
????</style>
????<script?type="text/javascript">
????//?JS實(shí)現(xiàn)選項(xiàng)卡切換
????????window.onload=function(){
????????????var?tabs?=?document.getElementById('tabs');
????????????var?li?=?document.getElementsByTagName('li');
????????????var?div?=?tabs.getElementsByTagName('div');
????????????for(var?i=0;?i<li.length;?i++){
????????????????li[i].onmouseover?=?function(){
????????????????????for(var?j=0;?j<li.length;?j++){
????????????????????????li[j].className='';
????????????????????????div[j].className='hide';
????????????????????}
????????????????this.className="on";
????????????????div[i].className="";
????????????????};
????????????}
????????}
????</script>
?
</head>
<body>
<!--?HTML頁面布局?-->
<div?id="tabs">
????<ul>
????????<li>房產(chǎn)</li>
????????<li>家居</li>
????????<li>二手房</li>
????</ul>
????<div>
????<p>275萬購昌平鄰鐵三居?總價(jià)20萬買一居</p>
????<p>200萬內(nèi)購五環(huán)三居?140萬安家東三環(huán)</p>
????<p>北京首現(xiàn)零首付樓盤?53萬購東5環(huán)50平</p>
????<p>京樓盤直降5000?中信府?公園樓王現(xiàn)房</p>
????</div>
????<div>
????<p>40平出租屋大改造?美少女的混搭小窩</p>
????<p>經(jīng)典清新簡(jiǎn)歐愛家?90平老房煥發(fā)新生</p>
????<p>新中式的酷色溫情?66平撞色活潑家居</p>
????<p>瓷磚就像選好老婆?衛(wèi)生間煙道的設(shè)計(jì)</p>
????</div>
????<div>
????<p>通州豪華3居260萬?二環(huán)稀缺2居250w甩</p>
????<p>西3環(huán)通透2居290萬?130萬2居限量搶購</p>
????<p>黃城根小學(xué)學(xué)區(qū)僅260萬?121平70萬拋!</p>
????<p>獨(dú)家別墅280萬?蘇州橋2居優(yōu)惠價(jià)248萬</p>
????</div>
</div>
</body>
</html>