html+css+js实现标签页切换

2024-10-18 06:18:33

CSS部分：

#Tab {
margin:0 auto;
width:640px;
border:none;
position:absolute;
z-index:9;
margin-left:320px;
_margin-left:0px;
padding-top:180px;
}
.Menubox {
height:26px;
border-bottom:2px solid #64B8E4;
background:#none;
}
.Menubox ul {
list-style:none;
margin:0;
padding:0;
position:absolute;
}
.Menubox ul li {
float:left;
background:#64B8E4;
line-height:26px;
display:block;
cursor:pointer;
width:65px;
text-align:center;
color:#fff;
font-weight:bold;
border-top:1px solid #64B8E4;
border-left:1px solid #64B8E4;
border-right:1px solid #64B8E4;
border-top-left-radius:4px;
border-top-right-radius:4px;
}
.Menubox ul li.hover {
background:#fff;
border-bottom:1px solid #fff;
color:#147AB8;
}
.Contentbox {
clear:both;
margin-top:0px;
border-top:none;
height:10px;
padding-top:8px;
}
.Contentbox ul {
list-style:none;
margin:7px;
padding:0;
}
.Contentbox ul li {
line-height:24px;
border-bottom:1px dotted #ccc;
}

JS部分：

<script type="text/javascript">
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
</script>

HTML部分：

<div id="Tab">
<div class="Menubox">
<ul>
<li id="menu1" onmouseover="setTab('menu',1,2)" class="hover">部门动态</li>
<li id="menu2" onmouseover="setTab('menu',2,3)" >机关收文</li>
<li id="menu3" onmouseover="setTab('menu',3,3)" >机关发文</li>
</ul>
</div>
<div class="Contentbox">
<div id="con_menu_1" class="hover">
<ul>
<li><a href="#">1213</a></li>
<li><a href="#">12312123</a></li>
<li><a href="#">123123123</a></li>
<li><a href="#">3123123213</a></li>
<li><a href="#">1231232131</a></li>
<li><a href="#">123123123123</a></li>
<li><a href="#">3232323</a></li>
<li><a href="#">23232323</a></li>
</ul>
</div>
<div id="con_menu_2" style="display:none">
<ul>
<li><a href="#">2312312312</a></li>
<li><a href="#">123123123</a></li>
<li><a href="#">1231231231</a></li>
<li><a href="#">123123123123</a></li>
<li><a href="#">123123123123</a></li>
<li><a href="#">12312312312</a></li>
<li><a href="#">123123123</a></li>
<li><a href="#">123123123123123</a></li>
</ul>
</div>
<div id="con_menu_3" style="display:none">
<ul>
<li><a href="#">123</a></li>
<li><a href="#">12323213</a></li>
<li><a href="#">323123123</a></li>
<li><a href="#">123123123</a></li>
<li><a href="#">123123</a></li>
<li><a href="#">123123</a></li>
<li><a href="#">1231231</a></li>
<li><a href="#">123123123</a></li>
</ul>
</div>
</div>
</div>

最新文章

热门文章