js選項卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul,li{margin:0;padding: 0;}
li{list-style-type: none}
.on{width: 350px;height: 62px;border-bottom: 2px solid #8B4513;}
.on li{float: left;height: 60px;line-height: 60px;margin-left: 10px;border: 1px solid #999;border-bottom: none;}
.on li:hover{cursor: pointer}
.on li.active{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;}
.box{width: 350px;clear: both;border: 1px solid #ccc;border-top: none;}
.show{display: block}
.hide{display: none}
</style>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<ul class="on" id="change">
<li class="active" id="home">home</li>
<li id="family">family</li>
<li id="ershoufang">ershoufang</li>
</ul>
<ul class="box show" id="one">
<li>275萬購昌平鄰鐵三居 總價20萬買一居</li>
<li>200萬內購五環三居 140萬安家東三環</li>
<li>北京首現零首付樓盤 53萬購東5環50平</li>
<li>京樓盤直降5000 中信府 公園樓王現房</li>
</ul>
<ul class="box hide" id="two">
<li>40平出租屋大改造 美少女的混搭小窩</li>
<li>經典清新簡歐愛家 90平老房煥發新生</li>
<li>新中式的酷色溫情 66平撞色活潑家居</li>
<li>瓷磚就像選好老婆 衛生間煙道的設計</li>
</ul>
<ul class="box hide" id="three">
<li>通州豪華3居260萬 二環稀缺2居250w甩</li>
<li>西3環通透2居290萬 130萬2居限量搶購</li>
<li>黃城根小學學區僅260萬 121平70萬拋!</li>
<li>獨家別墅280萬 蘇州橋2居優惠價248萬</li>
</ul>
<script type="text/javascript">
var ul1 = document.getElementById(‘change‘);
var lic = ul1.getElementsByTagName(‘li‘);
var ul2 = document.getElementsByClassName(‘box‘);
for(var i = 0; i < lic.length ; i++) {
lic[i].index = i;
lic[i].onmouseover = function() {
for(var i = 0; i < lic.length; i++) {
lic[i].className = ‘‘;
}
this.className = "active";
for(var j = 0; j < ul2.length; j++){
ul2[j].className="hide";
}
alert(this.index);
ul2[this.index].className = "show";
}
}
</script>
</body>
</html>
window.onload = function(){}是當頁面所有元素都加載完後，包括文件才觸發，文件資源 不好時會有延遲．通常希望ＤＯＭ元素初始化完成時就執行操作，用$(document).ready(function(){}) 方法．
js選項卡