请选择进入手机版 | 继续访问电脑版

收藏本站腾讯微博新浪微博

邮件列表客服QQ 800003860 切换到窄版

点点网模板设计大赛

phpchina

蓝色理想最新研发动态 用悬赏三天解决问题解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动地图任务 邮件更新任务:保护帐号安全

积分换实物，来参加蓝色理想积分兑换吧！ 联系招聘客服蓝色理想帮你找工作！ 万元奖励等你拿——点点网模板设计大赛

经典论坛 › 论坛 › 网站开发区 › 前台制作与脚本专栏 › [分享/修正]滑动门,简洁,新手上路制作篇 (小鸽子系列)

发新帖

查看: 29652|回复: 70

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

vickeychen　楼主

Linr

帖子: 103
体力: 319
威望: 7
居住地: 湖南省岳阳市

发表于 2007-3-27 16:40:28 |显示全部楼层

以前回复过几个朋友,关于滑动门的代码,那时我还没有用上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>▒ 恋婷滑动门技术</title>
<style media="screen" type="text/css">
<!--
*{font-size:12px;}
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
UL{list-style-type:none; margin:0px;}

/* 标准盒模型 */
.ttl{height:18px;}
.ctt{height:auto;padding:6px;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;}
.w936{margin:2px 0;clear:both;width:936px;/*这里调整整个滑动门的宽度*/}

/* TAB 切换效果 */
.tb_{background-image: url('http://bbs.blueidea.com/attachments/2007/4/29/20070429_b6d924afad052649402dWs8adqAyLtgi.gif'); background-repeat: repeat-x;background-color: #E6F2FF;}
.tb_ ul{height:24px;}
.tb_ li{float:left;height: 24px;line-height:1.9;width: 94px;cursor:pointer;}

/* 用于控制显示与隐藏的css类 */
.normaltab   { background-image:url('http://bbs.blueidea.com/attachments/2007/4/29/20070429_1bd9c293199c87ac974auuJXlsPMeKDq.gif'); background-repeat: no-repeat; color:#1F3A87 ;}
.hovertab    { background-image: url('http://bbs.blueidea.com/attachments/2007/4/29/20070429_55976880c7b020703a18yOxpDn5WBaHd.gif'); background-repeat: no-repeat; color:#1F3A87; font-weight:bold }
.dis{display:block;}
.undis{display:none;}
-->
</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 编辑 ]

附件: 你需要登录才可以下载或查看附件。没有帐号？注册 

西部数码顶级域名注册商39元抢注！

使用道具举报

阿会楠

帖子: 522
体力: 2212
威望: 1
居住地: 广东省广州市

发表于 2007-3-27 21:49:56 |显示全部楼层

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

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

大花

超级版主 

帖子: 10077
体力: 6299
威望: 1
居住地: 云南省曲靖市

发表于 2007-3-27 22:53:10 |显示全部楼层

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

使用道具举报

帖子: 31
体力: 165
威望: 0

发表于 2007-3-28 17:24:37 |显示全部楼层

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

上课乱画的人

使用道具举报

林立秀我爱你

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

发表于 2007-4-13 13:21:11 |显示全部楼层

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

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

使用道具举报

帖子: 396
体力: 1101
威望: 0

发表于 2007-4-13 13:34:25 |显示全部楼层

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

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

使用道具举报

帖子: 31
体力: 77
威望: 0

发表于 2007-4-19 17:43:24 |显示全部楼层

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

使用道具举报

帖子: 138
体力: 292
威望: 0

发表于 2007-4-19 17:55:37 |显示全部楼层

如果要做成点击后再转到请将<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>▒ 恋婷滑动门技术</title>
<style media="screen" type="text/css">
<!--
*{font-size:12px;}
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
UL{list-style-type:none; margin:0px;}

/* 标准盒模型 */
.ttl{height:18px;}
.ctt{height:auto;padding:6px;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;}
.w936{margin:2px 0;clear:both;width:936px;/*这里调整整个滑动门的宽度*/}

/* TAB 切换效果 */
.tb_{background-image: url('http://www.dc18.com/images/barbg_tab.gif'); background-repeat: repeat-x;background-color: #E6F2FF;}
.tb_ ul{height:24px;}
.tb_ li{float:left;height: 24px;line-height:1.9;width: 94px;cursor:pointer;}

/* 用于控制显示与隐藏的css类 */
.normaltab   { background-image:url('http://www.dc18.com/images/normal_tab.gif'); background-repeat: no-repeat; color:#1F3A87 ;}
.hovertab    { background-image: url('http://www.dc18.com/images/hover_tab.gif'); background-repeat: no-repeat; color:#1F3A87; font-weight:bold }
.dis{display:block;}
.undis{display:none;}
-->
</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>

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

使用道具举报

帖子: 51
体力: 131
威望: 0

发表于 2007-4-21 16:42:15 |显示全部楼层

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

i am a blank

使用道具举报

帖子: 1163
体力: 4277
威望: 0

发表于 2007-4-21 18:43:46 |显示全部楼层

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

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

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

忍受。一定要学会忍受。

使用道具举报

帖子: 5
体力: 42
威望: 0

发表于 2007-4-22 19:10:06 |显示全部楼层

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

使用道具举报

哲服千里

帖子: 1075
体力: 3612
威望: 0

发表于 2007-4-27 14:34:44 |显示全部楼层

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

使用道具举报

21gs　

帖子: 48
体力: 99
威望: 0

发表于 2007-4-27 14:50:16 |显示全部楼层

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

如何实现最好有一个演示

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

A.S.D.F.

使用道具举报

哲服千里

帖子: 1075
体力: 3612
威望: 0

发表于 2007-4-27 15:04:30 |显示全部楼层

经过仔细检查，总算好了

使用道具举报

蓝蓝的神仙

帖子: 1052
体力: 5994
威望: 3
居住地: 上海市闵行区

发表于 2007-4-28 09:49:23 |显示全部楼层

现学现卖

<!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">
<!--
*{font-size:12px;}
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
UL{list-style-type:none; margin:0px;}

/* 标准盒模型 */
.ttl{height:18px;}
.ctt{height:auto;padding:6px;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;}
.w936{margin:2px 0;clear:both;width:936px;/*这里调整整个滑动门的宽度*/}

/* TAB 切换效果 */
.tb_{background-image: url('http://www.dc18.com/images/barbg_tab.gif'); background-repeat: repeat-x;background-color: #E6F2FF;}
.tb_ ul{height:24px;}
.tb_ li{float:left;height: 24px;line-height:1.9;width: 94px;cursor:pointer;}

/* 用于控制显示与隐藏的css类 */
.normaltab   { background-image:url('http://www.dc18.com/images/normal_tab.gif'); background-repeat: no-repeat; color:#1F3A87 ;}
.hovertab    { background-image: url('http://www.dc18.com/images/hover_tab.gif'); background-repeat: no-repeat; color:#1F3A87; font-weight:bold }
.dis{display:block;}
.undis{display:none;}
-->
</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 编辑 ]

使用道具举报

子虚乌有

荣誉管理 

帖子: 8391
体力: 26707
威望: 187
居住地: 江苏省苏州市

发表于 2007-4-29 01:50:06 |显示全部楼层

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

<!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 media="screen" type="text/css">
<!--
*{font-size:12px;}
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
UL{list-style-type:none; margin:0px;}

/* 标准盒模型 */
.ttl{height:18px;}
.ctt{height:auto;padding:6px;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;}
.w936{margin:2px 0;clear:both;width:936px;/*这里调整整个滑动门的宽度*/}

/* TAB 切换效果 */
.tb_{background-image: url('http://bbs.blueidea.com/attachments/2007/4/29/20070429_b6d924afad052649402dWs8adqAyLtgi.gif'); background-repeat: repeat-x;background-color: #E6F2FF;}
.tb_ ul{height:24px;}
.tb_ li{float:left;height: 24px;line-height:1.9;width: 94px;cursor:pointer;}

/* 用于控制显示与隐藏的css类 */
.normaltab   { background-image:url('http://bbs.blueidea.com/attachments/2007/4/29/20070429_1bd9c293199c87ac974auuJXlsPMeKDq.gif'); background-repeat: no-repeat; color:#1F3A87 ;}
.hovertab    { background-image: url('http://bbs.blueidea.com/attachments/2007/4/29/20070429_55976880c7b020703a18yOxpDn5WBaHd.gif'); background-repeat: no-repeat; color:#1F3A87; font-weight:bold }
.dis{display:block;}
.undis{display:none;}
-->
</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>

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

子叶：子乌的叶子
子乌书简

使用道具举报

winhero_charles　

幽谷鸟

帖子: 883
体力: 2830
威望: 2
居住地: 广东省深圳市

发表于 2007-4-29 10:22:18 |显示全部楼层

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

使用道具举报

老李飞砖

帖子: 662
体力: 2394
威望: 2
居住地: 河北省秦皇岛市

发表于 2007-4-29 17:21:38 |显示全部楼层

这个比较简单一点吧

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

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

使用道具举报

帖子: 117
体力: 661
威望: 0

发表于 2007-4-30 10:54:28 |显示全部楼层

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

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

学习

使用道具举报

帖子: 117
体力: 661
威望: 0

发表于 2007-4-30 11:22:45 |显示全部楼层

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

学习

使用道具举报

子虚乌有

荣誉管理 

帖子: 8391
体力: 26707
威望: 187
居住地: 江苏省苏州市

发表于 2007-4-30 11:35:53 |显示全部楼层

……

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

<!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 media="screen" type="text/css">
<!--
*{font-size:12px;}
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
UL{list-style-type:none; margin:0px;}

/* 标准盒模型 */
.ttl{height:18px;}
.ctt{height:auto;padding:6px;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;}
.w936{margin:2px 0;clear:both;width:936px;/*这里调整整个滑动门的宽度*/}

/* TAB 切换效果 */
.tb_{background-image: url('http://bbs.blueidea.com/attachments/2007/4/29/20070429_b6d924afad052649402dWs8adqAyLtgi.gif'); background-repeat: repeat-x;background-color: #E6F2FF;}
.tb_ ul{height:24px;}
.tb_ li{float:left;height: 24px;line-height:1.9;width: 94px;cursor:pointer;}

/* 用于控制显示与隐藏的css类 */
.normaltab   { background-image:url('http://bbs.blueidea.com/attachments/2007/4/29/20070429_1bd9c293199c87ac974auuJXlsPMeKDq.gif'); background-repeat: no-repeat; color:#1F3A87 ;}
.hovertab    { background-image: url('http://bbs.blueidea.com/attachments/2007/4/29/20070429_55976880c7b020703a18yOxpDn5WBaHd.gif'); background-repeat: no-repeat; color:#1F3A87; font-weight:bold }
.dis{display:block;}
.undis{display:none;}
-->
</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>

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

子叶：子乌的叶子
子乌书简

使用道具举报

帖子: 117
体力: 661
威望: 0

发表于 2007-4-30 11:46:53 |显示全部楼层

现在好了

现在好了谢谢了

学习

使用道具举报

帖子: 242
体力: 911
威望: 0

发表于 2007-5-2 10:26:38 |显示全部楼层

[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

使用道具举报

帖子: 47
体力: 118
威望: 0

发表于 2007-5-2 11:28:36 |显示全部楼层

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

bings.cn

使用道具举报

xxhai

帖子: 339
体力: 1212
威望: 0
居住地: 陕西省西安市

发表于 2007-5-2 21:23:32 |显示全部楼层

10楼的好像更好点

使用道具举报

帖子: 227
体力: 574
威望: 0

发表于 2007-5-3 15:09:03 |显示全部楼层

如何增加与减少？

我是人

使用道具举报

帖子: 277
体力: 613
威望: 0

发表于 2007-5-3 23:50:45 |显示全部楼层

在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白痴，请问怎么才能带真实连接???

已经不是博客了

使用道具举报

帖子: 69
体力: 289
威望: 0

发表于 2007-5-5 14:35:31 |显示全部楼层

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

使用道具举报

帖子: 69
体力: 289
威望: 0

发表于 2007-5-5 14:57:24 |显示全部楼层

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

使用道具举报

帖子: 1
体力: 7
威望: 0

发表于 2007-6-11 15:54:03 |显示全部楼层

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

使用道具举报

发新帖

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )

GMT+8, 2012-2-13 11:00 , Processed in 0.219290 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部