javascript仿126邮箱TAB切换效果

效果演示：此效果需要鼠标点击才能实现切换。

<!-- 
引用时保留下原创作者喽,尊重任何一位原创作者,促进中国互联网进程 
Editor:weasle 
Email:weasle@163.com 
QQ:112011531 
--> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> 
<title>简洁Tab</title> 
<style type="text/css"> 
<!-- 
body,div,ul,li{ 
padding:0; 
text-align:center; 
} 
body{ 
font:12px "宋体"; 
text-align:center; 
} 
a:link{ 
color:#00F; 
text-decoration:none; 
} 
a:visited { 
color: #00F; 
text-decoration:none; 
} 
a:hover { 
color: #c00; 
text-decoration:underline; 
} 
ul{ list-style:none;} 
/*选项卡1*/ 
#Tab1{ 
width:460px; 
margin:0px; 
padding:0px; 
margin:0 auto;} 
/*选项卡2*/ 
#Tab2{ 
width:576px; 
margin:0px; 
padding:0px; 
margin:0 auto;} 
/*菜单class*/ 
.Menubox { 
width:100%; 
background:url(http://www.jb51.net/upload/small/20079299441652.gif); 
height:28px; 
line-height:28px; 
} 
.Menubox ul{ 
margin:0px; 
padding:0px; 
} 
.Menubox li{ 
float:left; 
display:block; 
cursor:pointer; 
width:114px; 
text-align:center; 
color:#949694; 
font-weight:bold; 
} 
.Menubox li.hover{ 
padding:0px; 
background:#fff; 
width:116px; 
border-left:1px solid #A8C29F; 
border-top:1px solid #A8C29F; 
border-right:1px solid #A8C29F; 
background:url(http://www.jb51.net/upload/small/200792994426548.gif); 
color:#739242; 
font-weight:bold; 
height:27px; 
line-height:27px; 
} 
.Contentbox{ 
clear:both; 
margin-top:0px; 
border:1px solid #A8C29F; 
border-top:none; 
height:181px; 
text-align:center; 
padding-top:8px; 
} 
--> 
</style> 
<script> 
<!-- 
/*第一种形式 第二种形式 更换显示样式*/ 
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> 
</head> 
<body> 


 
<div id="Tab1"> 
<div class="Menubox"> 
<ul> 
<li id="one1" onclick="setTab('one',1,4)" class="hover">新闻1</li> 
<li id="one2" onclick="setTab('one',2,4)" >新闻2</li> 
<li id="one3" onclick="setTab('one',3,4)">新闻3</li> 
<li id="one4" onclick="setTab('one',4,4)">新闻4</li> 
</ul> 
</div> 
<div class="Contentbox"> 
<div id="con_one_1" class="hover">新闻列表1</div> 
<div id="con_one_2" style="display:none">新闻列表2</div> 
<div id="con_one_3" style="display:none">新闻列表3</div> 
<div id="con_one_4" style="display:none">新闻列表4</div> 
</div> 
</div> 

 
<div id="Tab2"> 
<div class="Menubox"> 
<ul> 
<li id="two1" onclick="setTab('two',1,4)" class="hover">新闻1</li> 
<li id="two2" onclick="setTab('two',2,4)" >新闻2</li> 
<li id="two3" onclick="setTab('two',3,4)">新闻3</li> 
<li id="two4" onclick="setTab('two',4,4)">新闻4</li> 
</ul> 
</div> 
<div class="Contentbox"> 
<div id="con_two_1" >新闻列表1</div> 
<div id="con_two_2" style="display:none">新闻列表2</div> 
<div id="con_two_3" style="display:none">新闻列表3</div> 
<div id="con_two_4" style="display:none">新闻列表4</div> 
</div> 
</div> 
</body>

 

posted on 2013-01-26 09:42  ECshop商城二次开发博客  阅读(841)  评论(0)  编辑  收藏  举报

导航