可多次使用的仿126邮箱选项卡的源码 [复制链接]

weasle　楼主

初级会员

帖子: 38
体力: 90
威望: 0

发表于 2007-9-29 09:26:34 |显示全部楼层

选项卡我们这论坛里有不少,但同一个页面可以多次使用的可能没多少,我这个可以在同一个页面里可以有多个选项卡块.用了一个背景图.

背景图片已上传上去了,支持我的帮顶一下,俺昨天花费几个小时啊.
终于适应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,就完成了.

/*选项卡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.hxcgw.com/bbs/upfile/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.hxcgw.com/bbs/upfile/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>

</script>
</head>
<body>
<br><br>
<div id="Tab1">
<div class="Menubox">
<ul>
   <li id="one1" onclick="setTab('one',1,4)" >新闻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" >新闻列表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>

提示：您可以先修改部分代码再运行

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

[ 本帖最后由 weasle 于 2007-9-29 10:37 编辑 ]

		自动登录	找回密码
密码			注册

可多次使用的仿126邮箱选项卡的源码 [复制链接]

根据楼主那个做的..但是不能多次调用,js我是照楼主的.我是js菜鸟.不知道那里出错

浏览过的帖子

浏览过的版块