<!DOCTYPE html>
<html>
<head>
<meta charset="GB2312">
<title>Tab切换</title>
<style>
*{
font-size:12px;
}
.notice{
width:300px;
border:1px solid #D3D3D3;
height:98px;
position:relative;
}
.notice-tit{
width:300px;
background:#E0FFFF;
height:27px;
}
.notice-con ul{
list-style:none;
margin:0px;
padding:0px;
text-align:center;
}
.notice-con li{
float:left;
width:150px;
padding-top:8px;
}
.notice-tit ul{
width:302px;
line-height:26px;
margin:0px;
padding:0px;
list-style:none;
text-align:center;
position:absolute;
left:-1px;
}
.notice-tit li{
float:left;
width:60px;
border-bottom:1px solid #D3D3D3;
}
.notice-tit li.select{
border-left:1px solid #D3D3D3;
border-right:1px solid #D3D3D3;
border-bottom:1px solid #FFFFFF;
background:#FFFFFF;
}
.notice-tit li:hover{
border-left:1px solid #D3D3D3;
border-right:1px solid #D3D3D3;
border-bottom:1px solid #FFFFFF;
background:#FFFFFF;
}
</style>
</head>
<body>
<div class="notice">
<div class="notice-tit" id="notice-tit">
<ul>
<li>公告</li>
<li>规则</li>
<li>论坛</li>
<li>安全</li>
<li class="select">公益</li>
</ul>
</div>
<div class="notice-con" id="notice-con">
<div class="mod">
<ul>
<li>张勇：要玩快乐足球</li>
<li>阿里2000万驰援灾区！</li>
<li>旅游宝让你边玩边赚钱</li>
<li>多行跟进阿里信用贷款</li>
<ul>
</div>
<div class="mod" style="display:none;">
<ul>
<li>[通知]“滥发”即将换新</li>
<li>[通知]比特币严管啦！</li>
<li>[通知]禁发商品名录</li>
<li>[通知]商品属性限制</li>
</ul>
</div>
<div class="mod" style="display:none;">
<ul>
<li>[聚焦]金牌卖家再启航</li>
<li>[功能]橱窗规则升级啦</li>
<li>[话题]又爱又恨优惠券</li>
<li>[工具】购后送店铺红包</li>
</ul>
</div>
<div class="mod" style="display:none;">
</ul>
<ul>
<li>个人重要信息要管牢！</li>
<li>卖家防范红包诈骗提醒</li>
<li>更好收货地址的陷阱！</li>
<li>注意骗子的技术升级了！</li>
</ul>
</div>
<div class="mod" style="display:none;">
<ul>
<li>走近无声课堂</li>
<li>淘宝之行大众评审赢公益</li>
<li>爱心品牌联合征集<li>
<li>名公益机构淘宝开店功略</li>
</ul>
</div>
</div>
</div>
<script>
var objs = document.getElementById("notice-tit").getElementsByTagName("ul");
var divs = document.getElementById("notice-con").getElementsByTagName("div");
for(var i=0;i<objs.length;i++){
var lis=objs[i].getElementsByTagName("li");
for(var j=0;j<lis.length;j++){
lis[j].id=j;
lis[j].onmouseover=function(){
for(var j=0;j<lis.length;j++){
lis[j].className="";
divs[j].style.display="none";
}
this.className="select";
divs[this.id].style.display="block";
}
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="GB2312">
<title>Tab切换</title>
<style>
*{
font-size:12px;
}
.notice{
width:300px;
border:1px solid #D3D3D3;
height:98px;
position:relative;
}
.notice-tit{
width:300px;
background:#E0FFFF;
height:27px;
}
.notice-con ul{
list-style:none;
margin:0px;
padding:0px;
text-align:center;
}
.notice-con li{
float:left;
width:150px;
padding-top:8px;
}
.notice-tit ul{
width:302px;
line-height:26px;
margin:0px;
padding:0px;
list-style:none;
text-align:center;
position:absolute;
left:-1px;
}
.notice-tit li{
float:left;
width:60px;
border-bottom:1px solid #D3D3D3;
}
.notice-tit li.select{
border-left:1px solid #D3D3D3;
border-right:1px solid #D3D3D3;
border-bottom:1px solid #FFFFFF;
background:#FFFFFF;
}
.notice-tit li:hover{
border-left:1px solid #D3D3D3;
border-right:1px solid #D3D3D3;
border-bottom:1px solid #FFFFFF;
background:#FFFFFF;
}
</style>
</head>
<body>
<div class="notice">
<div class="notice-tit" id="notice-tit">
<ul>
<li>公告</li>
<li>规则</li>
<li>论坛</li>
<li>安全</li>
<li class="select">公益</li>
</ul>
</div>
<div class="notice-con" id="notice-con">
<div class="mod">
<ul>
<li>张勇：要玩快乐足球</li>
<li>阿里2000万驰援灾区！</li>
<li>旅游宝让你边玩边赚钱</li>
<li>多行跟进阿里信用贷款</li>
<ul>
</div>
<div class="mod" style="display:none;">
<ul>
<li>[通知]“滥发”即将换新</li>
<li>[通知]比特币严管啦！</li>
<li>[通知]禁发商品名录</li>
<li>[通知]商品属性限制</li>
</ul>
</div>
<div class="mod" style="display:none;">
<ul>
<li>[聚焦]金牌卖家再启航</li>
<li>[功能]橱窗规则升级啦</li>
<li>[话题]又爱又恨优惠券</li>
<li>[工具】购后送店铺红包</li>
</ul>
</div>
<div class="mod" style="display:none;">
</ul>
<ul>
<li>个人重要信息要管牢！</li>
<li>卖家防范红包诈骗提醒</li>
<li>更好收货地址的陷阱！</li>
<li>注意骗子的技术升级了！</li>
</ul>
</div>
<div class="mod" style="display:none;">
<ul>
<li>走近无声课堂</li>
<li>淘宝之行大众评审赢公益</li>
<li>爱心品牌联合征集<li>
<li>名公益机构淘宝开店功略</li>
</ul>
</div>
</div>
</div>
<script>
var objs = document.getElementById("notice-tit").getElementsByTagName("ul");
var divs = document.getElementById("notice-con").getElementsByTagName("div");
for(var i=0;i<objs.length;i++){
var lis=objs[i].getElementsByTagName("li");
for(var j=0;j<lis.length;j++){
lis[j].id=j;
lis[j].onmouseover=function(){
for(var j=0;j<lis.length;j++){
lis[j].className="";
divs[j].style.display="none";
}
this.className="select";
divs[this.id].style.display="block";
}
}
}
</script>
</body>
</html>