tab标签切换 问题出在哪里 求助
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tab切换</title>
</head>
<body>
<style>
*{
margin:0;
padding:0;
list-style:none;
font-size:12px;
}
.notice{
width:298px;
height:98px;
margin:10px;
border:1px solid #eee;
overflow:hidden;
}
.notice-tit{
height:27px;
position:relative;
background::#f00;
}
.notice-tit ul{
position:absolute;
width:301px;
left:-1px;
}
.notice-tit li {
width:58px;
height:26px;
padding:0 1px;
line-height:26px;
text-align:center;
border-bottom:1px solid #eee;
background:#F7f7f7;
float:left;
}
.notice-tit li.select {
padding:0;
font-weight::bold;
background:#fff;
border-bottom-color:#fff;
border-left:1px solid #eee;
border-right:1px solid #eee;
}
.notice li a:link,.notice li a:visited {
color:#000;
}
.notice .notice-tit li a:hover {
color:#f90;
}
.notice .notice-con .mod {
margin:10px 10px 10px 19px;
}
.notice .notice-con .mod ul li {
width:134px;
height:25px;
float:left;
overflow:hidden;
}
</style>
<script>
function $(id){
return typeof id==='string'?document.getElementById(id):id;
}
window.onload=function(){
//获取鼠标滑过或点击的标签和要切换内容的元素
var titles=$('notice-tit').getElementByTagName('li'),
divs=$('notice-con').getElementByTagName('div');
if(titles.length!=divs.length)
return;
//遍历titles下的所有li
for(var i=0;i<titles.length;i++){
titles[i].id=i;
titles[i].onmouseover=function(){
//清除所有li上的class
for(var j=0;j<titles.length;j++){
titles[j].className='';
divs[j].style.display='none';
}
//设置当前为高亮显示
this.className='select';
divs[this.id].style.display='block';
}
}
}
</script>
<div id="notice">
<div id="notice-tit">
<ul>
<li><a href="#">公告</a></li>
<li><a href="#">规则</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">安全</a></li>
<li><a href="#">公益</a></li>
</ul>
</div>
<div id="notice-con">
<div style="display:block">
<ul>
<li>测试内容区域</li><li>测试内容区域</li>
<li>测试内容区域</li><li>测试内容区域</li>
</ul>
</div>
<div style="display:none">
<ul>
<li>测试内容区域</li><li>测试内容区域</li>
<li>测试内容区域</li><li>测试内容区域</li>
</ul>
</div>
<div style="display:none">
<ul>
<li>测试内容区域</li><li>测试内容区域</li>
<li>测试内容区域</li><li>测试内容区域</li>
</ul>
</div>
<div style="display:none">
<ul>
<li>测试内容区域</li><li>测试内容区域</li>
<li>测试内容区域</li><li>测试内容区域</li>
</ul>
</div>
<div style="display:none">
<ul>
<li>测试内容区域</li><li>测试内容区域</li>
<li>测试内容区域</li><li>测试内容区域</li>
</ul>
</div>
</div>
</div>
</body>
</html>
冰封de蚕2回答
随时随地看视频慕课网APP
Html/CSS
JavaScript