<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Practice Questions-Tabs </title>
<style type= "Text/css" >
/* CSS style creation */
*{margin:0;padding:0;font:normal 12px "Microsoft Jas Black"; color: #000000;}
Ul{list-style-type:none;}
A{text-decoration:none;}
#tab-list{width:275px;height:190px;margin:20px Auto;}
#ul1 {border-bottom:2px solid #8B4513; height:32px;}
#ul1 li{display:inline-block;width:60px;line-height:30px;text-align:center;border:1px solid #999; Border-bottom: none;margin-left:5px;}
#ul1 Li:hover{cursor:pointer;}
#ul1 li.active{border-top:2px solid #8B4513; border-bottom:2px solid #FFFFFF;}
#tab-list div{border:1px solid #7396B8; border-top:none;}
#tab-list div li{height:30px;line-height:30px;text-indent:8px;}
. Show{display:block;}. Hide{display:none;}
</style>
<script type= "Text/javascript" >
Window.onload = function () {
var oUl1 = document.getElementById ("Ul1");
var aLi = oul1.getelementsbytagname ("Li");
var odiv = document.getElementById ("Tab-list");
var adiv = odiv.getelementsbytagname ("div");
for (var i = 0; i < ali.length; i++) {
Ali[i].index = i;
Ali[i].onmouseover = function () {
for (var i = 0; i < ali.length; i++) {
Ali[i].classname = "";
}
This.classname = "active";
for (var j = 0; J < Adiv.length; J + +) {
Adiv[j].classname = "Hide";
}
Adiv[this.index].classname = "show";
}
}
}
</script>
<body>
<!--HTML page layout--
<div id= "Tab-list" >
<ul id= "UL1" >
<li class= "Active" > Real estate </li><li> home </li><li> Resale </li>
</ul>
<div>
<ul>
<li><a href= "javascript:;" >275 the total price of Changping neighborhood triathlon 200,000 buy one </a></li>
<li><a href= "javascript:;" >200 in the five rings of the three-home 1.4 million East third ring </a></li>
<li><a href= "javascript:;" > Beijing 0 First pay property 530,000 buy East 5 ring 50 flat </a></li>
<li><a href= "javascript:;" > property straight down 5000 Citic House Park Wang existing house </a></li>
</ul>
</div>
<div class= "Hide" >
<ul>
<li><a href= "javascript:;" >40 Flat rental house big makeover beauty girl's mixed-up small nest </a></li>
<li><a href= "javascript:;" > Classic Fresh Jean Home 90 flat old room glow Renaissance </a></li>
<li><a href= "javascript:;" > New Chinese cool color warmth 66 Flat contrast lively home </a></li>
<li><a href= "javascript:;" > Tiles It's like choosing a wife. Design of the toilet flue </a></li>
</ul>
</div>
<div class= "Hide" >
<ul>
<li><a href= "javascript:;" > Tongzhou Luxury 3 2,600,002 ring scarce 2 250w dump </a></li>
<li><a href= "javascript:;" > West 3 ring Permeability 2 29,001,300,002 Limited Sale </a></li>
<li><a href= "javascript:;" > Huang Cheng Gen Elementary School District only 2,600,121 flat 700,000 throw!</a></li>
<li><a href= "javascript:;" > Exclusive Villa 2.8 million Suzhou Bridge 2 discount price 2.48 million </a></li>
</ul>
</div>
</div>
</body>
JavaScript knowledge to achieve the effect of tab switching