选项卡基础的知识;必须要掌握的,用处非常大

HTML代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/broszhu.css"/>
</head>
<body>
<div id="div1">
<ul>
<li class="select">111111</li>
<li>222222</li>
<li>333333</li>
</ul>
<div class="select">猪猪猪组合组合组织</div>
<div>的所得税的所得税的稍等</div>
<div>我饿问问问我</div>
<script src="js/broszhu.js"></script>
</div>
</body>
</html>

CSS代码如下:

body,div,ul,li{
margin: 0;
padding: 0;
font-size: 18px;
font-family: arial;
}
ul,li{
list-style: none;
}

#div1{
width: 600px;
margin: 50px auto 0;
}

#div1 ul li {
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid red;
margin-right: 10px;
float: left;
}
#div1 ul li.select{
background: yellow;
}
#div1 ul{
position: relative;
top: 1px;
}

#div1 div{
width: 600px;
height: 300px;
line-height: 300px;
text-align: center;
border: 1px solid red;
clear: both;
display: none;
}
#div1 div.select{
display: block;
}

JS代码如下:

var oDiv=document.getElementById("div1");
var oLi=oDiv.getElementsByTagName("li");
var oDiv2=oDiv.getElementsByTagName("div");

for(var i=0;i<oLi.length;i++){
oLi[i].index=i;
oLi[i].onmouseover=function(){
tabChange(this.index)
};
};

function tabChange(index){
for(var i=0;i<oLi.length;i++){
oLi[i].className="";
oDiv2[i].className="";
}
oLi[index].className="select";
oDiv2[index].className="select"
}

““`