<!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>Notice</li>
<li >Rules</li>
<li>Forum</li>
<li>Security</li>
<li class="select">Public Interest</li>
</ul>
</div>
<div class="notice- con" id="notice-con">
<div class="mod">
<ul>
<li>Zhang Yong: Let's play happy football</li>
<li>Ali 20 million to help the disaster area! </li>
<li>Travel Treasure lets you make money while playing</li>
<li>[Notice] "Spam" is about to be renewed</li>
<li>[Notice] Bitcoin is under strict control! </li>
<li>[Notice] List of Prohibited Products</li>
<li>[Notice] Restrictions on Product Attributes</li>
</ul>
</div>
<div class="mod" style="display :none;"> <ul> <li>[Focus] Gold sellers set sail again</li> <li>[Function] The window rules have been upgraded</li> <li>[Topic] Love and hate coupons< /li> <li>[Tool]Send red envelopes after purchase</li> </ul> </div> <div class="mod" style="display:none;"> </ul> <ul> < li>Important personal information must be kept under control! </li> < li>Reminder for sellers to prevent red envelope fraud</li> <li>The trap of a better delivery address! </li> <li>Watch out for scammers' technology upgrades! </li> </ul> </div>
<div class="mod" style="display:none;">
<ul>
<li>Approaching the Silent Classroom</li>
<li>Taobao Tour Public Review Wins Public Welfare</li>
<li>Love Brand Alliance Solicitation of <li>
<li>Name public welfare organizations Taobao shop opening skills</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>Notice</li>
<li >Rules</li>
<li>Forum</li>
<li>Security</li>
<li class="select">Public Interest</li>
</ul>
</div>
<div class="notice- con" id="notice-con">
<div class="mod">
<ul>
<li>Zhang Yong: Let's play happy football</li>
<li>Ali 20 million to help the disaster area! </li>
<li>Travel Treasure lets you make money while playing</li>
<li>[Notice] "Spam" is about to be renewed</li>
<li>[Notice] Bitcoin is under strict control! </li>
<li>[Notice] List of Prohibited Products</li>
<li>[Notice] Restrictions on Product Attributes</li>
</ul>
</div>
<div class="mod" style="display :none;"> <ul> <li>[Focus] Gold sellers set sail again</li> <li>[Function] The window rules have been upgraded</li> <li>[Topic] Love and hate coupons< /li> <li>[Tool]Send red envelopes after purchase</li> </ul> </div> <div class="mod" style="display:none;"> </ul> <ul> < li>Important personal information must be kept under control! </li> < li>Reminder for sellers to prevent red envelope fraud</li> <li>The trap of a better delivery address! </li> <li>Watch out for scammers' technology upgrades! </li> </ul> </div>
<div class="mod" style="display:none;">
<ul>
<li>Approaching the Silent Classroom</li>
<li>Taobao Tour Public Review Wins Public Welfare</li>
<li>Love Brand Alliance Solicitation of <li>
<li>Name public welfare organizations Taobao shop opening skills</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>