可多次使用的仿126邮箱选项卡的源码

背景图片已上传上去了,支持我的帮顶一下,俺昨天花费几个小时啊.
终于适应Ie,ff 浏览器.现在所有代码公开给大家.希望大家喜欢.要用的赶紧拿去用吧.
再加一个div块时只要
<div id="Tab2">
<div class="Menubox">
<ul>
<li id="two1" onclick="setTab('two',1,4)" >新闻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>

看到上面的two没有,把上面的这段复制下,把two改成three,或任何一个不同名的id,就完成了.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >

<!--

引用时保留下原创作者喽,尊重任何一位原创作者,促进中国互联网进程

Editor:weasle

http://www.hxcgw.com

Email:weasle@163.com

QQ:112011531

-->

<head>

<title>简洁Tab</title>

<!--

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.cnblogs.com/images/cnblogs_com/cb/bg1.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.cnblogs.com/images/cnblogs_com/cb/bg2.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>

<!--

/*第一种形式第二种形式更换显示样式*/

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>

<ul>

</ul>

</div>

</div>

<br>

<ul>

</ul>

</div>

</div>

</body>

</html>

忘记说了tab2也要改,改成tab3吧,同一个页面div,id总不能重复吧.