標籤：poi 優惠價 width odi ota aaa style hid 房產
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>實踐題 - 選項卡</title>
<style type="text/css">
/* CSS樣式製作 */
*{margin:0;padding:0;font-size:12px;}
#tabs{width:220px;padding:5px;height:150px;margin:20px;}
#tabs ul{list-style:none;display:block;height:30px;line-height:30px;border-bottom:2px solid saddlebrown;}
#tabs ul li{list-style:none;float:left;cursor:pointer;height:28px;line-height:28px;width:60px;text-align:center;margin:0 3px;border:1px solid #aaa;}
#tabs div{height:120px;line-height:25px;border:1px solid #ccc;border-top:none;padding:5px;}
.hide{display:none;}
#tabs ul li.on{border-top:2px solid saddlebrown;border-bottom:2px solid #fff;}
</style>
</head>
<body>
<!-- HTML頁面配置 -->
<div id="tabs">
<ul>
<li class="on">房產</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div>
275萬購昌平鄰鐵三居 總價20萬買一居<br/>
200萬內購五環三居 140萬安家東三環<br/>
北京首現零首付樓盤 53萬購東5環50平<br/>
京樓盤直降5000 中信府 公園樓王現房 <br/>
</div>
<div class="hide">
40平出租屋大改造 美少女的混搭小窩<br/>
經典清新簡歐愛家 90平老房煥發新生<br/>
新中式的酷色溫情 66平撞色活潑家居<br/>
瓷磚就像選好老婆 衛生間煙道的設計<br/>
</div>
<div class="hide">
通州豪華3居260萬 二環稀缺2居250w甩<br/>
西3環通透2居290萬 130萬2居限量搶購<br/>
黃城根小學學區僅260萬 121平70萬拋!<br/>
獨家別墅280萬 蘇州橋2居優惠價248萬<br/>
</div>
</div>
<script type="text/javascript">
// JS實現選項卡切換
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
oLis[i].index = i; //給oLis裡面的每一個成員加一個屬性
//位置1 alert(oLis[i].index); //輸出結果 0 1 2
oLis[i].onmouseover = function(){ //當滑鼠滑過時
for(var n=0;n<len;n++){ //再遍曆下，目的是為了初始化
oLis[n].className = ""; //清除oLis的所有的的classname
oDivs[n].className = "hide"; //設定所有的滑動門的內容的classname=hide，應該是隱藏所有的內容
}
//位置2 alert(oLis[i].index); //你滑鼠不over自然不顯示
this.className = "on"; //設定當前滑鼠滑過的classname=“on”
oDivs[this.index].className = ""; //注意這個this.index，如果寫成i的話是不對的，你可以自己試一下，意思是相對應滑鼠滑過的導航的內容清除calss設定為顯示
}
}
}
</script>
</body>
</html>
原生js選項卡
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
