打印

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

weasle [楼主]

初级会员

帖子: 33
体力: 74
威望: 0
离线: 42 天

1^# 大中小发表于 2007-9-29 09:26

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

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

<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">

</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>
<br>
<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>
</body>
</html>

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

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

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

TOP

西部数码VPS主机1G内存仅266元

weasle [楼主]

初级会员

帖子: 33
体力: 74
威望: 0
离线: 42 天

2^# 大中小发表于 2007-9-29 09:38

自己顶下,方便阅读.
那个顶部图片暂时没传上去,效果上大打折扣,代码没有错误,等回儿传上去,可以看到更好的效果.

图片已上传上去了,支持我的帮顶一下,俺昨天搞了好几个小时啊.适应Ie,ff 浏览器.
大家赶紧拿去用吧.

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

TOP

广州周立功诚聘—平面/网页/UI/工业设计师 | 天业互联-酷睿租用599￥

qqhu

创想设计

中级会员

帖子: 401
体力: 351
威望: 0
当前: 北京海淀区
离线: 1 天

专长 网页设计,策划

3^# 大中小发表于 2007-9-29 09:44

不错...这个是见过最方便的.

高清手机图片

TOP

认证您的手机，获得手机认证图标

，更多手机认证的好处

qqhu

创想设计

中级会员

帖子: 401
体力: 351
威望: 0
当前: 北京海淀区
离线: 1 天

专长 网页设计,策划

4^# 大中小发表于 2007-9-29 10:12

怎么默认的不是第一个呢? 在导航栏里....

高清手机图片

TOP

用CSS布局建站从零开始 | Photoshop中打造史诗般梦幻场景 | 05年第一次软件行业创业的惨痛教训

weasle [楼主]

初级会员

帖子: 33
体力: 74
威望: 0
离线: 42 天

5^# 大中小发表于 2007-9-29 10:36

刚有人抱怨怎么默认不是第一个呢,如果你这点脑筋都不想动,那真的是没办法
既使你就拿了这个代码你也无法应用.
我还是提倡:多看,多想,最好对别人的东西二次开发,把更多的东西奉献给大家.从群众来,到群众去.
加上class="hover"就可以解决刚才朋友的提问.

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

TOP

qqhu

创想设计

中级会员

帖子: 401
体力: 351
威望: 0
当前: 北京海淀区
离线: 1 天

专长 网页设计,策划

6^# 大中小发表于 2007-9-29 10:42

呵呵．．

高清手机图片

TOP

xiahaiyong

一百来斤

中级会员

帖子: 138
体力: 276
威望: 0
当前: 浙江金华
离线: 37 天

专长 网页设计,Flash,前端制作

7^# 大中小发表于 2007-9-29 10:50

引用:

原帖由 weasle 于 2007-9-29 10:36 发表
刚有人抱怨怎么默认不是第一个呢,如果你这点脑筋都不想动,那真的是没办法
既使你就拿了这个代码你也无法应用.
我还是提倡:多看,多想,最好对别人的东西二次开发,把更多的东西奉献给大家.从群众来,到群众去.
加 ...

支持,学习中...
希望那天自己也能发张自己的帖子

o1o.net.ru

TOP

qqhu

创想设计

中级会员

帖子: 401
体力: 351
威望: 0
当前: 北京海淀区
离线: 1 天

专长 网页设计,策划

8^# 大中小发表于 2007-9-29 10:53

引用:

我还是提倡:多看,多想,最好对别人的东西二次开发,把更多的东西奉献给大家.从群众来,到群众去.
加 ...

支持．．

高清手机图片

TOP

togoog

天使共舞

银牌会员

帖子: 562
体力: 1164
威望: 0
当前: 北京海淀区
离线: 18 天

专长 网页设计,ASP,搜索

9^# 大中小发表于 2007-9-29 12:02

不错，收藏一下。谢谢分享

一起的力量~一起杀毒网

TOP

gway

初级会员

帖子: 79
体力: 163
威望: 0
离线: 13 天

10^# 大中小发表于 2007-9-29 13:10

引用:

原帖由 qqhu 于 2007-9-29 10:12 发表
怎么默认的不是第一个呢? 在导航栏里....

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

<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">

</style>
<script>

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

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

[ 本帖最后由 gway 于 2007-9-29 13:26 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

努力学习中。。。

TOP

Kpeach

新手上路

帖子: 18
体力: 39
威望: 0
离线: 175 天

11^# 大中小发表于 2007-9-29 17:34

顶楼上的！

TOP

zxy3208

初级会员

帖子: 102
体力: 195
威望: 0
当前: 北京丰台区
离线: 548 天

12^# 大中小发表于 2007-9-29 17:48

!这个比较不错！顶下ＬＺ！

TOP

chong6

银牌会员

帖子: 560
体力: 1184
威望: 0
离线: 20 天

13^# 大中小发表于 2007-9-29 17:53

不错啊!!
顶!!!

TOP

lussica

初级会员

帖子: 45
体力: 113
威望: 0
当前: 北京海淀区
离线: 389 天

14^# 大中小发表于 2007-9-29 17:57

收藏！

TOP

weasle [楼主]

初级会员

帖子: 33
体力: 74
威望: 0
离线: 42 天

15^# 大中小发表于 2007-9-29 19:05

你们都怎么理解的啊,gway虽然弄好了,你多预览下你的,你会发现上面菜单那有条线有时不会消失呢.还有就是没必要加一段代码,css中我都写好了,有现成的为什么不用,呵呵,我不说了加一个class="样式",这里是就是class="hover"
你们都没有看到,呵呵.....
就是.Menubox li.hover 这个了...

看我下面的,和第一楼都一样,唯一就是加了个class="hover"
<div id="con_one_1" >新闻列表1</div>改成
<div id="con_one_1" class="hover">新闻列表1</div>这样就行了呢.你们都搞这么复杂.呵呵..

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

<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">

</style>
<script>

</script>
</head>
<body>
<br><br>
<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>
<br>
<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>
</html>

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

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

TOP

comasp

高级会员

帖子: 432
体力: 719
威望: 0
当前: 上海普陀
离线: 2 天

专长 前端制作,JS,UE

16^# 大中小发表于 2007-9-29 19:27

ding lz...ding ls....

www.cssrain.cn

TOP

weasle [楼主]

初级会员

帖子: 33
体力: 74
威望: 0
离线: 42 天

17^# 大中小发表于 2007-9-29 20:25

忘了说了,在ff浏览器中正文的高度和ie隔了些,是因为padding的原故啊..呵呵..加点分.

TOP

yjlrwmqj

xxhai

高级会员

帖子: 290
体力: 624
威望: 0
当前: 陕西西安
离线: 4 天

18^# 大中小发表于 2007-9-29 21:21

给改成鼠标放上去自动响应的吧

小小孩

TOP

chong6

银牌会员

帖子: 560
体力: 1184
威望: 0
离线: 20 天

19^# 大中小发表于 2007-10-3 01:18

引用:

原帖由 yjlrwmqj 于 2007-9-29 21:21 发表
给改成鼠标放上去自动响应的吧

把onclick改成onMouseOver就是鼠标了~!!!

TOP

liu6089

新手上路

帖子: 13
体力: 36
威望: 0
离线: 6 天

20^# 大中小发表于 2007-10-3 01:33

能不能做个左边选项的

TOP

ghfhaifeng2008

新手上路

帖子: 36
体力: 23
威望: 0
当前: 山东济南
离线: 536 天

21^# 大中小发表于 2007-10-3 14:24

正需要那，谢谢了，

8xici.com

TOP

chaguifei

新手上路

帖子: 9
体力: 0
威望: 0
当前: 浙江杭州
离线: 168 天

22^# 大中小发表于 2007-10-4 10:42

很不错的东西

TOP

hgteam

新手上路

帖子: 17
体力: 35
威望: 0
当前: 江苏南京
离线: 2 天

23^# 大中小发表于 2007-10-6 11:24

好东西。楼主强人

TOP

lzhh

xdou

初级会员

帖子: 74
体力: 151
威望: 0
当前: 北京丰台区
离线: 3 天

专长 网页设计,Flash,前端制作

24^# 大中小发表于 2007-10-6 11:32

顶！！！

TOP

livecoffee

初级会员

帖子: 70
体力: 142
威望: 0
当前: 湖北武汉
离线: 28 天

专长 网页设计,PHP,ASP

25^# 大中小发表于 2007-10-6 12:49

CSS的魅力实在太大了

TOP

binghexijian

中级会员

帖子: 197
体力: 384
威望: 0
当前: 福建泉州
离线: 7 天

26^# 大中小发表于 2007-10-6 17:27

各位去看看我的问题。帮忙解决一下。谢谢。http://bbs.blueidea.com/thread-2797024-1-1.html ，另外，怎么改成鼠标触发会改变背景图片，就像我链接里面的那个呢？

[ 本帖最后由 binghexijian 于 2007-10-6 17:43 编辑 ]

TOP

karrow

新手上路

帖子: 17
体力: 42
威望: 0
当前: 北京通州区
离线: 84 天

27^# 大中小发表于 2007-10-6 20:59

先支持下。。。

PC151.COM

TOP

yachuan520

天空飞扬的柳絮

中级会员

帖子: 169
体力: 299
威望: 10
当前: 上海闸北
离线: 30 天

专长 ASP,.NET,C#

28^# 大中小发表于 2007-10-7 18:16

强顶。非常支持，正需要呢。

TOP

berain

老马

初级会员

帖子: 88
体力: 165
威望: 0
当前: 广东茂名
离线: 14 天

29^# 大中小发表于 2007-10-8 09:44

嗯，看中了那会长大2px的效果，学习中。。。

TOP

holyli

银牌会员

帖子: 452
体力: 1113
威望: 0
离线: 1 天

30^# 大中小发表于 2007-10-8 10:30

强顶。非常支持，正需要呢。

先天下
www.xiantianxia.cn
www.futuremall.cn

TOP