打印

[分享/修正]滑动门,简洁,新手上路制作篇 (小鸽子系列)

vickeychen [楼主]

Linr

初级会员

帖子: 92
体力: 154
威望: 6
当前: 湖南岳阳
离线: 13 天

专长 CG,.NET,SL

1^# 大中小发表于 2007-3-27 16:40

以前回复过几个朋友,关于滑动门的代码,那时我还没有用上IE7,FF,结果,发现只能在IE6下运行,代码也很长;今天又有朋友问我这个,我只好花一点时间,终于把这个东东完成了,希望大家喜欢;

兼容IE7;FF;IE6
代码更简洁,更易读;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>&#9618; 恋婷滑动门技术</title>
<style media="screen" type="text/css">

</style>
<script type="text/javascript" language="javascript">
//<!CDATA[
function g(o){return document.getElementById(o);}
function HoverLi(n){
//如果有N个标签,就将i<=N;
//本功能非常OK,兼容IE7,FF,IE6;http://www.xiaogezi.cn/ [小鸽子]系列
for(var i=1;i<=6;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';
}
//如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;
//]]>
</script>
</head>
<body>
<div class="w936">
	<div id="tb_" class="tb_">
			<ul>
				<li id="tb_1" class="hovertab" onmouseover="x:HoverLi(1);">
				流行音乐</li>
				<li id="tb_2" class="normaltab" onmouseover="i:HoverLi(2);">
				美女写真</li>
				<li id="tb_3" class="normaltab" onmouseover="a:HoverLi(3);">
				平面设计</li>
				<li id="tb_4" class="normaltab" onmouseover="o:HoverLi(4);">
				网络学堂</li>
				<li id="tb_5" class="normaltab" onmouseover="g:HoverLi(5);">
				恋爱宝典</li>
				<li id="tb_6" class="normaltab" onmouseover="z:HoverLi(6);">
				Q小鸽子</li>
			</ul>
	</div>
	<div class="ctt">
		<div class="dis" id="tbc_01">流行音乐 的内容</div>
		<div class="undis" id="tbc_02">美女写真 的内容</div>
		<div class="undis" id="tbc_03">平面设计 的内容</div>
		<div class="undis" id="tbc_04">网络学堂 的内容</div>
		<div class="undis" id="tbc_05">恋爱宝典 的内容</div>
		<div class="undis" id="tbc_06"><b>[Q小鸽子] 的内容</b><br /><img src="http://vickeychen.go3.icpcn.com/images/logo_main.GIF" alt="中国最Q小鸽子" />
		</div>
	</div>
</div>
<hr author="http://xiaogezi.cn" size="1" noshade="noshade" style="color:#064ca1;margin-top:30px;" />
</body>
</html>

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

[ 本帖最后由 Sheneyan 于 2007-4-29 01:13 编辑 ]

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

TOP

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

ahuinan

阿会楠

银牌会员

帖子: 516
体力: 1105
威望: 1
当前: 广东广州
离线: 1 天

专长 JS,ASP,.NET

2^# 大中小发表于 2007-3-27 21:49

楼主整个打个包~~~~~~~
否则要用的时候找图片太麻烦了~~

sosuo8.com

TOP

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

wwwtf92com

中级会员

认证
帖子: 1819
体力: 426
威望: 0
当前: 云南曲靖

专长 网页设计,策划,推广

3^# 大中小发表于 2007-3-27 22:53

最好不要自动转到..点击后再转会更好一点。.

花儿作坊

TOP

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

，更多手机认证的好处

yx8165443

初级会员

帖子: 32
体力: 73
威望: 0
离线: 100 天

4^# 大中小发表于 2007-3-28 17:24

不错，这几天正在找这样的导航！
谢谢楼主的贡献。

上课乱画的人

TOP

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

kipos

林立秀我爱你

初级会员

帖子: 36
体力: 82
威望: 0
离线: 137 天

专长搜索

5^# 大中小发表于 2007-4-13 13:21

<div class="dis" id="tbc_01">调用脚本</div>

请问我把调用脚本放到里面.显示空白.请指教...

TOP

newsn

银牌会员

帖子: 396
体力: 1096
威望: 0
离线: 789 天

6^# 大中小发表于 2007-4-13 13:34

谁能具体说说ie7和ie6的区别，就是应该代码方面应该注意的啊？

全新香港娱乐事件搜索引擎

TOP

hbqjsjc

初级会员

帖子: 31
体力: 72
威望: 0
离线: 335 天

7^# 大中小发表于 2007-4-19 17:43

如果在一个页面中有几处这样的效果，象网易主页中面左侧的一样，它的鼠标响应就只是第一个的，其它都会一起动。是不是要把每一个的代码都单独修改。
这样的话，网页代码重复了好多啊
有没有什么好办法？

TOP

siemensme

中级会员

帖子: 138
体力: 287
威望: 0
离线: 583 天

8^# 大中小发表于 2007-4-19 17:55

如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>&#9618; 恋婷滑动门技术</title>
<style media="screen" type="text/css">

</style>
<script type="text/javascript" language="javascript">
//<!CDATA[
function g(o){return document.getElementById(o);}
function HoverLi(n){
//如果有N个标签,就将i<=N;
//本功能非常OK,兼容IE7,FF,IE6;http://www.xiaogezi.cn/ [小鸽子]系列
for(var i=1;i<=6;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';
}
//如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;
//]]>
</script>
</head>
<body>
<div class="w936">
	<div id="tb_" class="tb_">
			<ul>
				<li id="tb_1" class="hovertab" onclick="x:HoverLi(1);">
				流行音乐</li>
				<li id="tb_2" class="normaltab" onclick="i:HoverLi(2);">
				美女写真</li>
				<li id="tb_3" class="normaltab" onclick="a:HoverLi(3);">
				平面设计</li>
				<li id="tb_4" class="normaltab" onclick="o:HoverLi(4);">
				网络学堂</li>
				<li id="tb_5" class="normaltab" onclick="g:HoverLi(5);">
				恋爱宝典</li>
				<li id="tb_6" class="normaltab" onclick="z:HoverLi(6);">
				Q小鸽子</li>
			</ul>
	</div>
	<div class="ctt">
		<div class="dis" id="tbc_01">流行音乐 的内容</div>
		<div class="undis" id="tbc_02">美女写真 的内容</div>
		<div class="undis" id="tbc_03">平面设计 的内容</div>
		<div class="undis" id="tbc_04">网络学堂 的内容</div>
		<div class="undis" id="tbc_05">恋爱宝典 的内容</div>
		<div class="undis" id="tbc_06"><b>[Q小鸽子] 的内容</b><br /><img src="http://vickeychen.go3.icpcn.com/images/logo_main.GIF" alt="中国最Q小鸽子" />
		</div>
	</div>
</div>
<hr author="http://xiaogezi.cn" size="1" noshade="noshade" style="color:#064ca1;margin-top:30px;" />
</body>
</html>

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

TOP

51blank

初级会员

帖子: 51
体力: 126
威望: 0
离线: 23 天

9^# 大中小发表于 2007-4-21 16:42

如果我要在一个页面里面做两个不一样风格（css不同）但是选项卡数量一样多的，应该怎么做呢？！
谢谢。
我javascript不会。所以完全看不懂。
现在的问题就是css样式和javascript共用了！使得无法实现一个页面两个选项卡效果！
请指教！谢！！~~~

i am a blank

TOP

yougucaofan

银牌会员

帖子: 1166
体力: 2136
威望: 0
离线: 39 天

10^# 大中小发表于 2007-4-21 18:43

不要跟我扣下来的代码比简洁

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
*{font:12px "宋体";margin:0;padding:0;}
ul{list-style: none;}
a{text-decoration: none;}
a:hover{text-decoration: underline;}
.TabADS{width:160px;}
.TabADS ul{width:160px; height:24px;background:#fff;}
.TabADS li{width:40px; float:left; height:18px; padding:6px 0 0 0; background:url(http://image2.sina.com.cn/home/07index/sinahome_ws_013.gif) no-repeat right #e4e4e4; text-align:center; color:#333; cursor:pointer;}
.TabADS .TasADSOn{background:url(http://image2.sina.com.cn/home/07index/sinahome_ws_012.gif) no-repeat right #ffe4a6; text-align:center; color:#333; font-weight:bold; cursor:pointer;}
.TabADSCon{background:#FFD77B;padding:5px;width:150px;}
.TabADSCon li{text-align:left; line-height:20px;}
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
function Show_TabADSMenu(tabadid_num,tabadnum){
	for(var i=0;i<4;i++){document.getElementById("tabadcontent_"+tabadid_num+i).style.display="none";}
	for(var i=0;i<4;i++){document.getElementById("tabadmenu_"+tabadid_num+i).className="";}
	document.getElementById("tabadmenu_"+tabadid_num+tabadnum).className="TasADSOn";
	document.getElementById("tabadcontent_"+tabadid_num+tabadnum).style.display="block";
}
</script>
<div class="TabADS">
<ul>
<li id="tabadmenu_10" onmouseover="setTimeout('Show_TabADSMenu(1,0)',200);" class="TasADSOn">教育</li>
<li id="tabadmenu_11" onmouseover="setTimeout('Show_TabADSMenu(1,1)',200);">招生</li>
<li id="tabadmenu_12" onmouseover="setTimeout('Show_TabADSMenu(1,2)',200);">培训</li>
<li id="tabadmenu_13" onmouseover="setTimeout('Show_TabADSMenu(1,3)',200);">出国</li>
</ul>
</div>
<div class="TabADSCon">
<ul id="tabadcontent_10">
<li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=75618,107743,107863&cid=0,0,0&sid=100107&advid=2852&camid=14519&show=ignore&url=http://www.chengcai.net/zhaosheng/06kehu/0614bd/bd1.html target=_blank">北大人力资源班今日报到</a></li>
<li><a href="" title="">中科院九大专业在职研！</a></li>
<li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=75453,107557,107680&cid=0,0,0&sid=99937&advid=2117&camid=14490&show=ignore&url=http://www.erptraining.cn/" target="_blank">六大著名高校招SAP硕士</a></li>
<li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=75660,107790,107910&cid=0,0,0&sid=100149&advid=2618&camid=14538&show=ignore&url=http://www.globeedu.com" target="_blank">07出国留学海外名校指南</a></li>
<li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=75688,107818,107938&cid=0,0,0&sid=100177&advid=2852&camid=14519&show=ignore&url=http://www.chengcai.net/zhaosheng/06kehu/0614bd/bd3.html target=_blank">北京大学财务总监班！！</a></li>
<li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=75661,107791,107911&cid=0,0,0&sid=100150&advid=2618&camid=14538&show=ignore&url=http://www.edubar.cn/gg/" target="_blank">！大专免试MBA！在职研</a></li>
<li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=75581,107701,107820&cid=0,0,0&sid=100070&advid=2852&camid=14519&show=ignore&url=http://mba.sem.tsinghua.edu.cn/fmba target=_blank">港中大-清华金融MBA招生</a></li></ul>
<ul id="tabadcontent_11" style="display:none;">
<li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=75692,107822,107942&cid=0,0,0&sid=100181&advid=2852&camid=14521&show=ignore&url=http://www.chengcai.net/zhaosheng/06kehu/0614bd/bd2.html" target="_blank">北大经理人班总裁人文班</a></li>
<li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=75667,107797,107917&cid=0,0,0&sid=100156&advid=2618&camid=14539&show=ignore&url=http://www.edubar.cn/gg/" target="_blank">大专免试MBA-名校在职研</a></li>
<li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=75456,107560,107683&cid=0,0,0&sid=99940&advid=2117&camid=14490&show=ignore&url=http://www.zzyjs.com/fadaren2.asp" target="_blank">囗囗 免试！在职硕士！</a></li>
<li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=75668,107798,107918&cid=0,0,0&sid=100157&advid=2618&camid=14539&show=ignore&url=http://www.bwpx.com/" target="_blank">北外.网考托福雅思培训!</a></li>
<li><a href=http://sina.allyes.com/main/adfclick?db=sina&bid=75695,107825,107945&cid=0,0,0&sid=100184&advid=2852&camid=14521&show=ignore&url=http://emba.uibe.edu.cn/ target=_blank>外经贸大学EMBA十期开学</a></li>
</ul>
<ul id="tabadcontent_12" style="display:none;">
<li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=75699,107829,107949&cid=0,0,0&sid=100188&advid=2852&camid=14521&show=ignore&url=http://www.jbtraining.com.cn/" target="_blank">中低学历高薪就业首选！</a></li>
<li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=75675,107805,107925&cid=0,0,0&sid=100164&advid=2618&camid=14539&show=ignore&url=http://www.zju-polyucenter.org" target="_blank">浙大理大合作办学10周年</a></li>
<li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=75461,107565,107688&cid=0,0,0&sid=99945&advid=2117&camid=14490&show=ignore&url=http://www.zongjian.org/" target="_blank">！清华服务/运营总监班</a></li>
<li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=75676,107806,107926&cid=0,0,0&sid=100165&advid=2618&camid=14539&show=ignore&url=http://www.thpx.org/n_pxzz.asp?wid=9&rid=40" target="_blank">清华大学总裁高级研修班</a></li>
<li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=75594,107717,107836&cid=0,0,0&sid=100083&advid=2852&camid=14521&show=ignore&url=http://www.chengcai.net/zhaosheng/07kehu/0330caijingdaxue/" target="_blank">中央财大财务总监班！！</a></li>
<li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=75677,107807,107927&cid=0,0,0&sid=100166&advid=2618&camid=14539&show=ignore&url=http://www.xzhtbenet.com/kaipian1.htm" target="_blank">就业无忧！选北大青鸟！</a></li>
</ul>
<ul id="tabadcontent_13" style="display:none;">
<li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=75702,107832,107952&cid=0,0,0&sid=100191&advid=2852&camid=14521&show=ignore&url=http://www.tctd.net/America/200612261540022003.htm" target="_blank">20万美元一步获美国绿卡</a></li>
<li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=75683,107813,107933&cid=0,0,0&sid=100172&advid=2618&camid=14539&show=ignore&url=http://www.cansine.com/" target="_blank">！凯胜惊爆移民成功内幕</a></li>
<li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=75464,107568,107691&cid=0,0,0&sid=99948&advid=2117&camid=14490&show=ignore&url=http://www.cango.com.cn" target="_blank">！！加，美，澳，德移民</a></li>
<li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=75684,107814,107934&cid=0,0,0&sid=100173&advid=2618&camid=14539&show=ignore&url=http://www.can-goldlink.com/index8.asp" target="_blank">！移民官操作手册大曝光</a></li>
</ul>
</div>
</body>
</html>

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

忍受。一定要学会忍受。

TOP

steven7907

新手上路

帖子: 5
体力: 16
威望: 0
离线: 27 天

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

看了楼主的代码受益匪浅，现在碰到一个问题：如果我点击另外一个页面的超链接直接显示某一个选项卡的内容（所有的选项卡在新的页面上），比如说楼主给出代码中的“平面设计”中的内容，应该怎么做，谢谢！

TOP

yxljames

哲服千里

银牌会员

帖子: 1052
体力: 1834
威望: 0
当前: 上海浦东

专长 网页设计,PHP,AS

12^# 大中小发表于 2007-4-27 14:34

在FF下主按钮与左边有一段空隙，怎么都去不掉，看看谁知道

大唐艺术设计

TOP

21gs

初级会员

帖子: 48
体力: 94
威望: 0
离线: 387 天

13^# 大中小发表于 2007-4-27 14:50

那如何我要实现横排两列选项卡

如何实现最好有一个演示

我困惑好久了总是不能实现

A.S.D.F.

TOP

yxljames

哲服千里

银牌会员

帖子: 1052
体力: 1834
威望: 0
当前: 上海浦东

专长 网页设计,PHP,AS

14^# 大中小发表于 2007-4-27 15:04

经过仔细检查，总算好了

大唐艺术设计

TOP

jsw0528

蓝蓝的神仙

银牌会员

认证
帖子: 715
体力: 1104
威望: 0
当前: 江苏南京

专长 PHP,ASP,UE

15^# 大中小发表于 2007-4-28 09:49

现学现卖

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>wo_is神仙</title>
<style media="screen" type="text/css">

</style>
<script type="text/javascript" language="javascript">
//<!CDATA[
function g(o){return document.getElementById(o);}
function HoverLi(n){
//如果有N个标签,就将i<=N;
//本功能非常OK,兼容IE7,FF,IE6;http://www.xiaogezi.cn/ [小鸽子]系列
for(var i=1;i<=2;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';
}
//如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;
//]]>
</script>
</head>
<body>
<div class="w936">
	<div id="tb_" class="tb_">
			<ul>
				<li id="tb_1" class="hovertab" onmouseover="x:HoverLi(1);">蓝色理想</li>
				<li id="tb_2" class="normaltab" onmouseover="i:HoverLi(2);">It's my Blog</li>
			</ul>
	</div>
	<div class="ctt">
		<div class="dis" id="tbc_01"><a href="http://www.blueidea.com" target="_blank"><img src="http://bbs.blueidea.com/images/blue/logo.gif" alt="蓝色理想"/></a></div>
		<div class="undis" id="tbc_02"><a href="http://wwww.ygblog.com" target="_blank"><img src="http://www.ygblog.com/UploadFiles/2007-1/112517065.gif" alt="It's my Blog"/></a></div>
		</div>
	</div>
</div>
</body>
</html>

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

[ 本帖最后由 jsw0528 于 2007-4-28 09:51 编辑 ]

TOP

Sheneyan

子虚乌有

荣誉管理团队

认证
帖子: 8272
体力: 19495
威望: 177
当前: 福建厦门
离线: 34 天

专长 JS,JAVA,Oracle

16^# 大中小发表于 2007-4-29 01:50

稍微优化及扩展了一下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>&#9618; 恋婷滑动门技术</title>
<style media="screen" type="text/css">

</style>
<script type="text/javascript" language="javascript">
//<!CDATA[
function g(o){return document.getElementById(o);}
if (document.attachEvent){
  addEvent = function(o,evn,f){o.attachEvent("on"+evn,f)}
}
else if (document.addEventListener){
  addEvent = function(o,evn,f){o.addEventListener(evn,f,false)}
}
/**
 * 功能：选项卡类
 * @param {String} nid 导航栏容器的id，导航栏里必须是li，至于是ul还是li就看个人喜好了
 * @param {String} cid 内容容器的id，内容容器里的第一层子节点（排除文本节点）都将作为内容处理
 * @param {String} action 操作，单击或鼠标移动
 * @excption 当导航栏和内容数量不对应时抛出错误
 * @author Sheneyan
 */
function initTab(nid,cid,action){
  var ls = g(nid).getElementsByTagName('li');
  var cc = g(cid).childNodes;
  var c = [];
  for (var i = 0 ; i < cc.length ; i ++)if(cc[i].nodeType==1)c.push(cc[i]);
  if (ls.length!=c.length)
    throw({description:'菜单和内容数量不对应'});
  for (var i = 0 ; i < ls.length ; i ++){
    ls[i].index = i;
    addEvent(ls[i],action,function(e){
      var self = window.event?window.event.srcElement:e?e.target:null;
      if (self.parentNode.last){
        self.parentNode.last.className = 'normaltab';
        c[self.parentNode.last.index].className = 'undis';
      };
      self.className = 'hovertab';
      c[self.index].className = 'dis';
      self.parentNode.last = self;
    });
  }
}
//]]>
</script>
</head>
<body onload="initTab('nav','cont','mouseover');initTab('nav2','cont2','click')">
<div class="w936">
  <div id="nav" class="tb_">
      <ul>
        <li class="normaltab" >流行音乐</li>
        <li class="normaltab" >美女写真</li>
        <li class="normaltab" >平面设计</li>
        <li class="normaltab" >网络学堂</li>
        <li class="normaltab">恋爱宝典</li>
        <li class="normaltab">Q小鸽子</li>
      </ul>
  </div>
  <div class="ctt" id="cont">
    <div class="dis">流行音乐 的内容</div>
    <div class="undis">美女写真 的内容</div>
    <div class="undis">平面设计 的内容</div>
    <div class="undis">网络学堂 的内容</div>
    <div class="undis">恋爱宝典 的内容</div>
    <div class="undis"><b>[Q小鸽子] 的内容</b><br /><img src="http://vickeychen.go3.icpcn.com/images/logo_main.GIF" alt="中国最Q小鸽子" />
    </div>
  </div>
</div>
<div class="w936">
  <div id="nav2" class="tb_">
      <ul>
        <li class="normaltab" >流行音乐</li>
        <li class="normaltab" >美女写真</li>
        <li class="normaltab" >平面设计</li>
        <li class="normaltab" >网络学堂</li>
        <li class="normaltab">恋爱宝典</li>
        <li class="normaltab">Q小鸽子</li>
      </ul>
  </div>
  <div class="ctt" id="cont2">
    <div class="dis">流行音乐 的内容</div>
    <div class="undis">美女写真 的内容</div>
    <div class="undis">平面设计 的内容</div>
    <div class="undis">网络学堂 的内容</div>
    <div class="undis">恋爱宝典 的内容</div>
    <div class="undis"><b>[Q小鸽子] 的内容</b><br /><img src="http://vickeychen.go3.icpcn.com/images/logo_main.GIF" alt="中国最Q小鸽子" />
    </div>
  </div>
</div>
</body>
</html>

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

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

winhero_charles

幽谷鸟

银牌会员

帖子: 883
体力: 1825
威望: 2
当前: 广东深圳
离线: 51 天

专长 网页设计,JS,ASP

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

帮我看看这个贴吧
http://bbs.blueidea.com/thread-2736018-1-1.html

TOP

mallee

老李飞砖

银牌会员

帖子: 645
体力: 1173
威望: 2
当前: 河北秦皇岛
离线: 1 天

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

这个比较简单一点吧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{
	color: #000;
	font-family: "宋体", arial;
	font-size: 12px;
	background: #fff;
	text-align: center;
	margin: 0;
}
.nTab{
	float: left;
	width: 654px;
	margin: 0 auto;
	border-bottom:1px #cccccc solid;
	background: url("../Images/nTab/bg.gif");
	background-position:left;
	background-repeat:repeat-y;
	margin-bottom:10px;
}
.nTab .TabTitle{
	clear: both;
	height: 22px;
	overflow: hidden;
}
.nTab .TabTitle ul{
	border:0;
	margin:0;
	padding:0;
}
.nTab .TabTitle li{
	float: left;
	width: 109px;
	cursor: pointer;
	padding-top: 6px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 2px;
	list-style-type: none;
}
.nTab .TabTitle .active{background: url("../Images/nTab/bg5_2.gif");}
.nTab .TabTitle .normal{background: url("../Images/nTab/bg5_2_1.gif");}
.nTab .TabContent{
	width:auto;
	margin: 0px auto;
	padding:10px 0 0 0;
	border-right:1px #cccccc solid;
}
.none {display:none;}
</style>
<script type="text/javascript">
function nTabs(thisObj,Num){
	if(thisObj.className == "active")return;
	var tabObj = thisObj.parentNode.id;
	var tabList = document.getElementById(tabObj).getElementsByTagName("li");
	for(i=0; i <tabList.length; i++)
	{
		if (i == Num)
		{
			thisObj.className = "active"; 
    		document.getElementById(tabObj+"_Content"+i).style.display = "block";
		}else{
			tabList[i].className = "normal"; 
			document.getElementById(tabObj+"_Content"+i).style.display = "none";
		}
	} 
}
</script>
</head>
<body>
<br />
<br />
<div align="center" style="padding-left:25px;">
  
  <div class="nTab">
    
    <div class="TabTitle">
      <ul id="myTab">
        <li class="active" onmouseover="nTabs(this,0);">aaa</li>
        <li class="normal" onmouseover="nTabs(this,1);">bbb</li>
        <li class="normal" onmouseover="nTabs(this,2);">ccc</li>
        <li class="normal" onmouseover="nTabs(this,3);">别碰我</li>
        <li class="normal" onmouseover="nTabs(this,4);">ddd</li>
        <li class="normal" onmouseover="nTabs(this,5);">ddd</li>
      </ul>
    </div>
    
    <div class="TabContent">
      <div id="myTab_Content0"> 000 </div>
      <div id="myTab_Content1" class="none"> 111 </div>
      <div id="myTab_Content2" class="none"> <br />222 </div>
      <div id="myTab_Content3" class="none"> <br /><br />333 </div>
      <div id="myTab_Content4" class="none"> <br />444 </div>
      <div id="myTab_Content5" class="none"> <br /><br /><br />555 </div>
    </div>
  </div>
  
  
  <div class="nTab" style="width:436px;">
    
    <div class="TabTitle">
      <ul id="myTab2">
        <li class="active" onclick="nTabs(this,0);">aaa</li>
        <li class="normal" onclick="nTabs(this,1);">bbb</li>
        <li class="normal" onclick="nTabs(this,2);">ccc</li>
        <li class="normal" onclick="nTabs(this,3);">单击</li>
      </ul>
    </div>
    
    <div class="TabContent">
      <div id="myTab2_Content0"> 000 </div>
      <div id="myTab2_Content1" class="none"> 111 </div>
      <div id="myTab2_Content2" class="none"> <br /><br />222 </div>
      <div id="myTab2_Content3" class="none"> <br />333 </div>
    </div>
  </div>
  
  
  <div class="nTab">
    
    <div class="TabTitle">
      <ul id="myTab3">
        <li class="active" onmouseover="nTabs(this,0);">aaa</li>
        <li class="normal" onmouseover="nTabs(this,1);">bbb</li>
        <li class="normal" onmouseover="nTabs(this,2);">ccc</li>
        <li class="normal" onmouseover="nTabs(this,3);">ddd</li>
        <li class="normal" onmouseover="nTabs(this,4);">ddd</li>
        <li class="normal" onmouseover="nTabs(this,5);">ddd</li>
      </ul>
    </div>
    
    <div class="TabContent">
      <div id="myTab3_Content0"> 000 </div>
      <div id="myTab3_Content1" class="none"> 111 </div>
      <div id="myTab3_Content2" class="none"> <br /><br /><br />222 </div>
      <div id="myTab3_Content3" class="none"> 333 </div>
      <div id="myTab3_Content4" class="none"> <br /><br />444 </div>
      <div id="myTab3_Content5" class="none"> <div style="border:1px #0000FF solid; margin:10px;">555555555</div> </div>
    </div>
  </div>
  
</div>
</body>
</html>

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

iw3c.com

TOP

wenhao676

中级会员

帖子: 112
体力: 341
威望: 0
离线: 88 天

19^# 大中小发表于 2007-4-30 10:54

子虚乌有优化后的有点小问题

当鼠标先经过非第一<li>时，第一个 <div class="ctt" id="cont">内容也显示

学习

TOP

wenhao676

中级会员

帖子: 112
体力: 341
威望: 0
离线: 88 天

20^# 大中小发表于 2007-4-30 11:22

没有修改过来,请子虚乌有再看看

学习

TOP

Sheneyan

子虚乌有

荣誉管理团队

认证
帖子: 8272
体力: 19495
威望: 177
当前: 福建厦门
离线: 34 天

专长 JS,JAVA,Oracle

21^# 大中小发表于 2007-4-30 11:35

……

当时偷懒，没弄默认选项-。-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>&#9618; 恋婷滑动门技术</title>
<style media="screen" type="text/css">

</style>
<script type="text/javascript" language="javascript">
//<!CDATA[
function g(o){return document.getElementById(o);}
if (document.attachEvent){
  addEvent = function(o,evn,f){o.attachEvent("on"+evn,f)}
}
else if (document.addEventListener){
  addEvent = function(o,evn,f){o.addEventListener(evn,f,false)}
}
/**
 * 功能：选项卡
 * @param {String} nid 导航栏容器的id，导航栏里必须是li，至于是ul还是li就看个人喜好了
 * @param {String} cid 内容容器的id，内容容器里的第一层子节点（排除文本节点）都将作为内容处理
 * @param {String} action 操作，单击或鼠标移动
 * @param {integer} defaultIndex 默认选中第几个选项卡，如果数字非法或者未提供数字则默认第一个
 * @exception 当导航栏和内容数量不对应时抛出错误
 * @author Sheneyan
 */
function initTab(nid,cid,action,defaultIndex){
  var ls = g(nid).getElementsByTagName('li');
  var cc = g(cid).childNodes;
  var c = [];
  var index = defaultIndex?defaultIndex:0;
  for (var i = 0 ; i < cc.length ; i ++)if(cc[i].nodeType==1)c.push(cc[i]);
  if (ls.length!=c.length)
    throw({description:'菜单和内容数量不对应'});
  for (var i = 0 ; i < ls.length ; i ++){
    ls[i].index = i;
    if (i==index){
      ls[i].className = 'hovertab';
      c[i].className = 'dis'
      ls[i].parentNode.last = ls[i];
    }
    addEvent(ls[i],action,function(e){
      var self = window.event?window.event.srcElement:e?e.target:null;
      if (self.parentNode.last){
        self.parentNode.last.className = 'normaltab';
        c[self.parentNode.last.index].className = 'undis';
      };
      self.className = 'hovertab';
      c[self.index].className = 'dis';
      self.parentNode.last = self;
    });
  }
}
//]]>
</script>
</head>
<body onload="initTab('nav','cont','mouseover');initTab('nav2','cont2','click',2)">
<div class="w936">
  <div id="nav" class="tb_">
      <ul>
        <li class="normaltab" >流行音乐</li>
        <li class="normaltab" >美女写真</li>
        <li class="normaltab" >平面设计</li>
        <li class="normaltab" >网络学堂</li>
        <li class="normaltab">恋爱宝典</li>
        <li class="normaltab">Q小鸽子</li>
      </ul>
  </div>
  <div class="ctt" id="cont">
    <div class="undis">流行音乐 的内容</div>
    <div class="undis">美女写真 的内容</div>
    <div class="undis">平面设计 的内容</div>
    <div class="undis">网络学堂 的内容</div>
    <div class="undis">恋爱宝典 的内容</div>
    <div class="undis"><b>[Q小鸽子] 的内容</b><br />
    </div>
  </div>
</div>
<div class="w936">
  <div id="nav2" class="tb_">
      <ul>
        <li class="normaltab" >流行音乐</li>
        <li class="normaltab" >美女写真</li>
        <li class="normaltab" >平面设计</li>
        <li class="normaltab" >网络学堂</li>
        <li class="normaltab">恋爱宝典</li>
        <li class="normaltab">Q小鸽子</li>
      </ul>
  </div>
  <div class="ctt" id="cont2">
    <div class="undis">流行音乐 的内容</div>
    <div class="undis">美女写真 的内容</div>
    <div class="undis">平面设计 的内容</div>
    <div class="undis">网络学堂 的内容</div>
    <div class="undis">恋爱宝典 的内容</div>
    <div class="undis"><b>[Q小鸽子] 的内容</b><br />
    </div>
  </div>
</div>
</body>
</html>

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

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

wenhao676

中级会员

帖子: 112
体力: 341
威望: 0
离线: 88 天

22^# 大中小发表于 2007-4-30 11:46

现在好了

现在好了谢谢了

学习

TOP

mayfish

高级会员

帖子: 236
体力: 883
威望: 0
离线: 445 天

23^# 大中小发表于 2007-5-2 10:26

[quote]原帖由 yougucaofan 于 2007-4-21 18:43 发表

不要跟我扣下来的代码比简洁
效果还行，不过看着有大写就觉得不好，
onmouseover="setTimeout('Show_TabADSMenu(1,0)',200);"
语句在DW8中显示不支持Netscape 6.0
能改改吗？

用Xhtml校验，有79个错误和提示信息
晕啊

[ 本帖最后由 mayfish 于 2007-5-2 10:40 编辑 ]

Etime
etime.5dblog.com

TOP

sky3918

初级会员

帖子: 43
体力: 103
威望: 0
离线: 8 天

24^# 大中小发表于 2007-5-2 11:28

恩，不错，赞一个。。。。。。

bings.cn

TOP

yjlrwmqj

xxhai

高级会员

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

25^# 大中小发表于 2007-5-2 21:23

10楼的好像更好点

小小孩

TOP

yadan

中级会员

帖子: 161
体力: 324
威望: 0
离线: 3 天

专长 前端制作,策划,推广

26^# 大中小发表于 2007-5-3 15:09

如何增加与减少？

我是人

TOP

edifierboy

高级会员

帖子: 277
体力: 608
威望: 0
离线: 201 天

27^# 大中小发表于 2007-5-3 23:50

在21楼的基础上
<li class="normaltab" >流行音乐</li>
      <li class="normaltab" >美女写真</li>
      <li class="normaltab" >平面设计</li>
      <li class="normaltab" >网络学堂</li>
      <li class="normaltab">恋爱宝典</li>
      <li class="normaltab">Q小鸽子</li>

加入超级链接就会出错。 js白痴，请问怎么才能带真实连接???

已经不是博客了

TOP

yuexx

初级会员

帖子: 69
体力: 142
威望: 0
离线: 11 天

28^# 大中小发表于 2007-5-5 14:35

如果是点击后变化的话就不用JS了哪
CSS搞定了

TOP

yuexx

初级会员

帖子: 69
体力: 142
威望: 0
离线: 11 天

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

看错了看错了
是CSS的…………不好意思

TOP

lorzo

新手上路

帖子: 1
体力: 2
威望: 0
离线: 722 天

30^# 大中小发表于 2007-6-11 15:54

找了好久的代码，这个简洁。

TOP