求助下面是源代码,求各位大佬帮忙解决
css
*{margin:0;padding:0;font-family:微软雅黑;}
a,img{border:none;text-decoration:none;}
ul,li{list-style-type:none;}
#nav{width:1180px;overflow:hidden;margin:50px auto 0 auto;padding:0 10px;background-color:#f3f3f3;}
.tab_li{float:left;line-height:50px;width:125px;}
.tab_li a{display:block;text-align:center;font-size:16px;color:#333;}
.tab_li:hover{background-color:#ddd;}
#xinwen{width:1180px;overflow:hidden;margin:0 auto;height:450px;padding:0 10px;background-color:#fcfcfc;position:relative;}
.tab_div{display:none;width:1180px;background-color:#fcfcfc;height:450px;line-height:450px;text-align:center;font-size:72px;color:#ccc;position:absolute;top:0;left:0;}
js
window.onload=function(){
var oBdTab = document.getElementsByClassName("tab_div")[1];
var oTab = document.getElementsByClassName("tab_div");
var oLi = document.getElementsByClassName("tab_li")[1];
var ali = document.getElementsByClassName("tab_li");
oBdTab.style.display = 'block';
oLi.style.backgroundColor = '#ddd';
oLi.style.fontWeight = 'bold';
for(var i = 0;i < ali.length; i++){
ali[i].index = i;
ali[i].onclick = function(){
for(var i = 0;i < oTab.length; i++){
ali[i].style.backgroundColor = '';
ali[i].style.fontWeight = '';
oTab.style.display = '';
}
ali[this.index].style.backgroundColor = '#ddd';
ali[this.index].style.fontWeight = 'bold';
oTab[this.index].style.display = 'block';
}
}
}
html
<div id="nav">
<ul>
<li class="tab_li"><a href="###">热点</a></li>
<li class="tab_li"><a href="###">今日推荐</a></li>
<li class="tab_li"><a href="###">直播</a></li>
<li class="tab_li"><a href="###">视频</a></li>
<li class="tab_li"><a href="###">阅读</a></li>
</ul>
</div>
<div id="xinwen">
<div class="tab_div">热点</div>
<div class="tab_div">今日推荐</div>
<div class="tab_div">直播</div>
<div class="tab_div">视频</div>
<div class="tab_div">阅读</div>
</div>
添加回答
举报
0/150
提交
取消