实现table切换的功能
知识点：1 共有的属性 写到共用的css class中。独有的写到单独的 id中
2 自定义 index 属性
3 排他思想
4 this 的用法
<body>
<div id="contend">
<!--第一个盒子的构架-->
<div id="part1" class="newsBox">
<ul>
<li class="box-li">新闻</li>
<li class="box-li">娱乐</li>
<li class="box-li">财经</li>
<li class="box-li">体育</li>
</ul>
<div class="box-div">新闻</div>
<div class="box-div">娱乐</div>
<div class="box-div">财经</div>
<div class="box-div">体育</div>
</div>
<!--第二个盒子的构架-->
<div id="part2" class="newsBox">
<ul>
<li class="box-li">新闻</li>
<li class="box-li">娱乐</li>
<li class="box-li">财经</li>
<li class="box-li">体育</li>
</ul>
<div class="box-div">新闻</div>
<div class="box-div">娱乐</div>
<div class="box-div">财经</div>
<div class="box-div">体育</div>
</div>
<!--第三个盒子的构架-->
<div id="part3" class="newsBox">
<ul>
<li class="box-li">新闻</li>
<li class="box-li">娱乐</li>
<li class="box-li">财经</li>
<li class="box-li">体育</li>
</ul>
<div class="box-div">新闻</div>
<div class="box-div">娱乐</div>
<div class="box-div">财经</div>
<div class="box-div">体育</div>
</div>
</div>
<script>
window.onload=function(){
//定义函数 实现背景切换效果
function bgChange(boxId){
var oBoxId=document.getElementById(boxId);
//通过获取的div集合，获取div下的 元素
var oBoxLi=oBoxId.getElementsByTagName('li');
var oBoxDiv=oBoxId.getElementsByTagName('div');
for(var i=0;i<oBoxLi.length;i++){
//赋予变量自定义属性
oBoxLi[i].index=i;
//定义每个变量方法
oBoxLi[i].onmouseover=function(){
//隐藏所有的层
for(var i=0;i<oBoxDiv.length;i++){
oBoxDiv[i].style.display='none';
}
//显示需要的
oBoxDiv[this.index].style.display='block';
}
}
}
bgChange('part1');
bgChange('part2');
bgChange('part3');
}
</script>
</body>
*{
margin:0;
padding:0;
list-style:none;}
#contend{
width:1105px;
height:960px;
margin:0 auto;
position:relative;
}
/*三个box相同的元素*/
.newsBox{
border:1px solid #000;
padding:15px;
}
.newsBox div{
float:left;
width:450px;
height:310px;
position:absolute;
top:46px;
display:block;
background-color:green;}
.newsBox ul li{
float:left;
cursor:pointer;
background-color:#CCCCCC;
padding:6px 18px;
margin-left:10px;
margin-right:10px;}
.newsBox ul li:hover{
color:#fff;
background-color:green;}
/*三个box各不相同的元素*/
#part1{
height:340px;
width:450px;
position:absolute;
top:40px;
left:40px;
}
#part2{
height:340px;
width:450px;
position:absolute;
top:40px;
left:560px;
}
#part3{
height:340px;
width:450px;
position:absolute;
top:440px;
left:40px;
}