打印

纯手工写的一个选项卡切换

yoom [楼主]

木匠的背篓

版主

认证
帖子: 2488
体力: 3628
威望: 3
当前: 四川达州

专长 前端制作,JS

1^# 大中小发表于 2008-9-8 13:41

下面这个标签是关键所在，共有5个参数，来赋予切换的功能。

复制内容到剪贴板

代码:

<input type="hidden" id="kp_OtherRegional" value="nav,li,cardarea,item,current_tab" />

首先演示一下功能。

<!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=utf-8" />
<title>选项卡</title>
<style type="text/css">
/*
	选项卡
----------------------------------------------------------------
*/
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:12px auto 0 auto;width:600px;}
h1,h2,h3,h4,h5,h6,p,form,dl,dt,dd,ul,ol{margin:0;padding:0;font-size:100%;}
ul{list-style:none;}
a{text-decoration:none;}
.display_none{display:none;}
/*选项卡的样式*/
.convention_tab{clear:both;width:100%;float:left;margin:15px 0 0 0;background:url(http://4.bp.blogspot.com/_bdBPvgEipxw/SMSk_BkFfaI/AAAAAAAAABQ/Auzj-1HXF1E/s320/switch_area.gif) left bottom repeat-x;padding-bottom:3px;overflow:hidden;padding-right:0px;}/*如果下面的区域是table，那么padding-right:2px;*/
	.convention_tab li{float:left;background:url(http://4.bp.blogspot.com/_bdBPvgEipxw/SMSk_BkFfaI/AAAAAAAAABQ/Auzj-1HXF1E/s320/switch_area.gif) right top no-repeat;margin-left:-12px;padding:0 30px 0 11px;}
		.convention_tab li a,.convention_tab li.normal_tab b{color:#fff;display:block;height:19px;float:left; background:#3C6084;padding-top:3px;}
	.convention_tab li.current_tab{background-position:right -100px;border-left:solid 2px #fff; padding-bottom:2px;}
		.convention_tab li.current_tab a{background-color:#98B1C5;color:#000;}
	.convention_tab li.start_tab{margin-left:0;padding-left:0;border-left:none;}
		.convention_tab li.start_tab a{padding-left:10px;}
	.convention_tab li#end_tab{background-position:right -50px;}
		.convention_tab li#end_tab a{padding-left:10px;}
	.convention_tab li.current_tab#end_tab{background-position:right -140px;}
		.convention_tab li.current_tab#end_tab a{background-color:#98B1C5;}
	/*每个item*/
	#cardarea,#cardarea2{border:solid 1px #3D5F85;clear:both;border-top:none;}
		#cardarea p,#cardarea2 p{padding:20px;text-align:left;line-height:23px;}
	#cardarea2 dl{text-align:left;padding:20px;line-height:23px;}
</style>
</head>
<body>
<div class="container">
	<ul id="nav" class="convention_tab">
		<li class="start_tab current_tab"><a href="#">选项卡001</a></li>
		<li><a href="#">缺点</a></li>
		<li><a href="#">仅供娱乐</a></li>
		<li><a href="#">选项卡004</a></li>
		<li id="end_tab"><a href="#">选项卡005</a></li>
	</ul>
	<div id="cardarea">
		<div class="item"><p>这里是div中的p标签，因为没有指定class为item，所以我不参与切换。</p></div>
		<p class="item display_none">我在页面加载完成后才添加的事件，可有的图片加载很慢，所以有时候可以把外部js中的addLoadEvent(getConfigInputObj);删除掉，然后直接书写 getConfigInputObj();当然要放在&lt;/html&gt;以保证xhtml已经加载完毕</p>
		<p class="item display_none">看网上演示Jquery的tab插件更加强大，不过我这个更为实用，o(∩_∩)o...。</p>
		<p class="item display_none">第四个</p>
		<p class="item display_none">第五个</p>
	</div>
	<ul id="nav2" class="convention_tab">
		<li class="start_tab current_tab"><a href="#">优点</a></li>
		<li><a href="#">使用方法</a></li>
		<li><a href="#">参数的意思</a></li>
		<li><a href="#">第4个</a></li>
		<li id="end_tab"><a href="#">最后一个</a></li>
	</ul>
	<div id="cardarea2">
		<p class="item">重用性极高,在IE6+,Firefox2+,Opera9中均能正常工作，且并没有使用hack。</p>
		<p class="item display_none"> <span style="font-family:Georgia, 'Times New Roman', Times, serif;"> &lt;input type="hidden" id="kp_OtherRegional" value="nav,li,cardarea,item,current_tab|nav2,li,cardarea2,item,current_tab" title="这个必不可少" /&gt; </span>即可完成事件添加,多个区域用竖线隔开。</p>
			<div class="item display_none">
			<dl>
				<dt>id为kp_OtherRegional的input元素共有5个参数</dt>
				<dd>第一个:表示id为nav的那个元素。</dd>
				<dd>第二个:获取到第一步的元素，遍历指定的元素，这取决于你写的什么标签，写的li它就会遍历li。</dd>
				<dd>第三个:切换区域的父容器,切换区域的父容器ID</dd>
				<dd>第四个:&lt;p class="item",这里没有限定是什么元素，而是限定带有指定class的才能参与切换。</dd>
				<dd>第五个:切换标签后当前标签的样式名。</dd>
			</dl>
		</div>
		<p class="item display_none">这里是第四个区域</p>
		<p class="item display_none">第五个</p>
	</div>
</div>
<input type="hidden" id="kp_OtherRegional" value="nav,li,cardarea,item,current_tab|nav2,li,cardarea2,item,current_tab" title="这个必不可少" />
<script type="text/javascript">
/*addLoadEvent.js*/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}
/*addLoadEvent.js结束*/
/*switch_display_area.js*/
function getConfigInputObj(){
	if(!document.getElementById || !document.getElementsByTagName)return;
	var configObj=document.getElementById("kp_OtherRegional");if(configObj==null)return;
	var configValue=configObj.getAttribute("value").replace(/\s/g,"");
	var configArray=configValue.split("|")
	var length=configArray.length;
	var childConfigArray=null;
	var childConfigValue="";
	for(var i=0;i<length;i++){
		childConfigArray=configArray[i].split(",");
		giveEvent(childConfigArray);
	}
	//destroy(getConfigInputObj);
}
function giveEvent(obj){
	if(obj==null){return;}
	var parentId=obj[0];
	var whichToTrigger=obj[1];
	var itemParent=obj[2];
	var itemClass=obj[3];
	var currentClassName=obj[4];
	var listerEvent=obj[5];
	if(!parentId || !whichToTrigger || !itemParent || !itemClass)return;
	var parentObj=null;
	var whichToTriggerObj=null;
	var itemParentObj=null;
	var itemObj=null;
	/*准备好各个元素*/
	parentObj=document.getElementById(parentId);
	if(!parentObj){return;}
	itemParentObj=document.getElementById(itemParent);
	whichToTriggerObj=parentObj.getElementsByTagName(whichToTrigger);//获取事件源对象的集合
	if(!parentObj || !itemParentObj || !whichToTriggerObj)return;
	itemObj=itemParentObj.getElementsByTagName("*");
	var length=itemObj.length;
	var objArray=new Array();
	for(var i=0;i<itemObj.length;i++){
		if(itemObj[i].className.indexOf(itemClass)>-1){
			objArray.push(itemObj[i]);
		}
	}
	var whichToTriggerObjLength=whichToTriggerObj.length;//获取事件源对象的长度
	var isExistAObj=null;
	for(var i=0;i<whichToTriggerObjLength;i++){
		whichToTriggerObj[i].setAttribute("oldClassName",whichToTriggerObj[i].className.replace(currentClassName));
		whichToTriggerObj[i].setAttribute("currentNum",i);
		if(listerEvent==null){
			whichToTriggerObj[i].onclick=function(){
				//return 
				return correspondingRegion(this,objArray,currentClassName,whichToTriggerObj);
			}
			isExistAObj=whichToTriggerObj[i].getElementsByTagName("a");
			if(isExistAObj.length>0){
				for(var j=0;j<isExistAObj.length;j++){
					isExistAObj[j].onfocus=function(){this.blur();}
				}
			}
		}else{
			whichToTriggerObj[i].onmouseover=function(){
				//return 
				return correspondingRegion(this,objArray,currentClassName,whichToTriggerObj);
			}
		}
		whichToTriggerObj[i].onfocus=function(){
			this.blur();
		}
	}
	//destroy(giveEvent);
}
//功能; 根据传递的参数切换（显示或隐藏）各个区域
function correspondingRegion(obj,objArray,currentClassName,whichToTriggerObj){
	var length=objArray.length;
	var currentNum=parseInt(obj.getAttribute("currentNum"),10);
	if(!objArray[currentNum]){
		/*alert("该div不存在");*/
		return;
	}else{
		/*先将所有样式 “归零”*/
		for(var i=0;i<length;i++){
			objArray[i].style.display="none";
			if(whichToTriggerObj[i]==null){continue;}
			//如果有老的样式
			if(whichToTriggerObj[i].getAttribute("oldClassName")!="" && whichToTriggerObj[i].getAttribute("oldClassName").indexOf(currentClassName)<0){
				whichToTriggerObj[i].className=whichToTriggerObj[i].getAttribute("oldClassName");
			}else if(whichToTriggerObj[i].getAttribute("oldClassName")!=""){
				whichToTriggerObj[i].className=whichToTriggerObj[i].getAttribute("oldClassName");
			}else{
				whichToTriggerObj[i].className="";
			}
		}
		//然后单独给当前对象加上className
		if(objArray[currentNum]!=null){
			objArray[currentNum].style.display="block";
			if(obj.getAttribute("oldClassName")!=""){
				obj.className=currentClassName+" "+obj.getAttribute("oldClassName");
			}else{
				obj.className=currentClassName;
			}
			//return false;
		}else{
			//return true;
		}
		return false;
	}
}
addLoadEvent(getConfigInputObj);
/*switch_display_area.js结束*/
</script>
</body>
</html>

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

已经封装好了的，如果你要使用，就把其中的js做成外部文件。
实现，只需要两步。
1：引入外部js；
2：然后书写那个input正确的参数，多个的话用 | 隔开。

16 楼展示的是多层嵌套的用法。，或者保存这里的附件查看。

[ 本帖最后由 yoom 于 2008-9-10 15:14 编辑 ]

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

本帖最近评分记录

caiying2007 威望 +2 谢谢分享 2008-11-19 17:30

年后到上海

TOP

西部数码分布式集群主机傲视群雄 | Adobe设计师狂欢节在线讲座免注册进入

yoom [楼主]

木匠的背篓

版主

认证
帖子: 2488
体力: 3628
威望: 3
当前: 四川达州

专长 前端制作,JS

2^# 大中小发表于 2008-9-8 13:45

回复 1# yoom [自己] 的帖子

addLoadEvent一定要放在所有script标签第一行。
如果body标签已经绑定onload函数，那么还要把script移到</html>之后。

年后到上海

TOP

PSD网页模板下载,高端实用 | 俄罗斯大蜘蛛反病毒软件

prince2pl

半打啤酒

高级会员

帖子: 439
体力: 659
威望: 0
当前: 广东深圳
离线: 1 天

专长 网页设计,平面,策划

3^# 大中小发表于 2008-9-8 13:54

呵呵``,看着还行,但用起来一般哈!

面对面

TOP

国际动画人才海外高薪就业

yoom [楼主]

木匠的背篓

版主

认证
帖子: 2488
体力: 3628
威望: 3
当前: 四川达州

专长 前端制作,JS

4^# 大中小发表于 2008-9-8 13:59

嗯，是的，没有什么特效。
不过一般的应用能够满足了。

年后到上海

TOP

明天教室职业插画师培训计划

checkout

初级会员

帖子: 100
体力: 199
威望: 0
当前: 上海徐汇
离线: 64 天

5^# 大中小发表于 2008-9-8 15:23

感觉还不错~

TOP

fbixiaozhu

新手上路

认证
帖子: 9
体力: 24
威望: 0
当前: 湖北武汉
离线: 183 天

6^# 大中小发表于 2008-9-9 00:13

感觉还可以。我来仔细研究下！

TOP

wclwcl

齐毛鸭

初级会员

帖子: 59
体力: 115
威望: 0
当前: 江苏南京

专长 前端制作

7^# 大中小发表于 2008-9-9 07:05

挺好，最好能是鼠标滑过的效果

淘宝开店qimaoya.com

TOP

xingxiu0811

高级会员

帖子: 164
体力: 547
威望: 0
当前: 北京朝阳区
离线: 120 天

专长 前端制作,JS,MySQL

8^# 大中小发表于 2008-9-9 08:35

IE7下错乱，你应该在IE7上下下功夫，这个很重要

一个人,就是石头,也要在天空划出流星的美丽......

网页ＱＱ群:13322041 加时打入:(蓝色理想)

TOP

yoom [楼主]

木匠的背篓

版主

认证
帖子: 2488
体力: 3628
威望: 3
当前: 四川达州

专长 前端制作,JS

9^# 大中小发表于 2008-9-9 10:22

楼上你好，我在IETester中的IE7里测试过了，是正常的。请你说详细点好么，我好改。

我以前测试的时候发现在IE8 beta1发现是错位的，不过在最新的IE8 beta2是显示正常的。

[ 本帖最后由 yoom 于 2008-9-9 10:34 编辑 ]

年后到上海

TOP

lshfong123

初级会员

帖子: 107
体力: 55
威望: 0

专长 PHP,.NET,C#

10^# 大中小发表于 2008-9-9 13:07

怎么样做外观呢

TOP

kenweng

怪兽

初级会员

帖子: 31
体力: 63
威望: 0
当前: 广东广州
离线: 3 天

专长 UI,前端制作,产品设计

11^# 大中小发表于 2008-9-9 13:53

太赞！！！！！

TOP

shaohua162001

荷西

高级会员

帖子: 2231
体力: 911
威望: 1
当前: 北京海淀区

专长 UI,前端制作

12^# 大中小发表于 2008-9-9 14:56

挺不错的效果
高度赞扬

人不要跟人性作斗争

TOP

yoom [楼主]

木匠的背篓

版主

认证
帖子: 2488
体力: 3628
威望: 3
当前: 四川达州

专长 前端制作,JS

13^# 大中小发表于 2008-9-9 15:59

另外一个简单的外观

其实我主要是想展示这个tab应用的简便，外观可以自己发挥想象。

<!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=utf-8" />
<title>选项卡</title>
<style type="text/css">
/*
	选项卡
----------------------------------------------------------------
*/
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:12px auto 0 auto;width:600px;position:relative;}
h1,h2,h3,h4,h5,h6,p,form,dl,dt,dd,ul,ol{margin:0;padding:0;font-size:100%;}
ul{list-style:none;}
a{text-decoration:none;}
.display_none{display:none;}
/*选项卡的样式*/
.convention_tab{width:100%;text-align:left;float:left;}
.convention_tab li{margin:0;padding:0;float:left;padding-right:10px;position:relative;z-index:2;bottom:-1px;}
.convention_tab li a{background:#eee;height:28px;line-height:28px;overflow:hidden;float:left;padding:0 8px;border:solid 1px #444;border-bottom:none;}
.convention_tab li a:hover{background:#e0e0e0;color:#000;}
/*选中后的样式*/
.convention_tab li.current_tab a,.convention_tab li.current_tab a:hover{background:#999;color:#fff;padding-top:1px;}
/*单独设置第二个tab的某些样式*/
#nav2 li.current_tab a,#nav2 li.current_tab a:hover{background:#ffffe1;color:#000;}
/*切换区域*/
#cardarea,#cardarea2{border:solid 1px #666;text-align:left;clear:both;}
#cardarea p,#cardarea2 p,#cardarea2 dl{padding:20px;line-height:23px;}
#nav2{margin-top:18px;}
</style>
</head>
<body>
<div class="container">
	<ul id="nav" class="convention_tab">
		<li class="start_tab current_tab"><a href="#">选项卡001</a></li>
		<li><a href="#">缺点</a></li>
		<li><a href="#">仅供娱乐</a></li>
		<li><a href="#">选项卡004</a></li>
		<li id="end_tab"><a href="#">选项卡005</a></li>
	</ul>
	<div id="cardarea">
		<div class="item"><p>这里是div中的p标签，因为没有指定class为item，所以我不参与切换。</p></div>
		<p class="item display_none">我在页面加载完成后才添加的事件，可有的图片加载很慢，所以有时候可以把外部js中的addLoadEvent(getConfigInputObj);删除掉，然后直接书写 getConfigInputObj();当然要放在&lt;/html&gt;以保证xhtml已经加载完毕</p>
		<p class="item display_none">看网上演示Jquery的tab插件更加强大，不过我这个更为实用，o(∩_∩)o...。</p>
		<p class="item display_none">第四个</p>
		<p class="item display_none">第五个</p>
	</div>
	<ul id="nav2" class="convention_tab">
		<li class="start_tab current_tab"><a href="#">优点</a></li>
		<li><a href="#">使用方法</a></li>
		<li><a href="#">参数的意思</a></li>
		<li><a href="#">第4个</a></li>
		<li id="end_tab"><a href="#">最后一个</a></li>
	</ul>
	<div id="cardarea2">
		<p class="item">重用性极高,在IE6+,Firefox2+,Opera9中均能正常工作，且并没有使用hack。</p>
		<p class="item display_none"> <span style="font-family:Georgia, 'Times New Roman', Times, serif;"> &lt;input type="hidden" id="kp_OtherRegional" value="nav,li,cardarea,item,current_tab|nav2,li,cardarea2,item,current_tab" title="这个必不可少" /&gt; </span>即可完成事件添加,多个区域用竖线隔开。</p>
			<div class="item display_none">
			<dl>
				<dt>id为kp_OtherRegional的input元素共有5个参数</dt>
				<dd>第一个:表示id为nav的那个元素。</dd>
				<dd>第二个:获取到第一步的元素，遍历指定的元素，这取决于你写的什么标签，写的li它就会遍历li。</dd>
				<dd>第三个:切换区域的父容器,切换区域的父容器ID</dd>
				<dd>第四个:&lt;p class="item",这里没有限定是什么元素，而是限定带有指定class的才能参与切换。</dd>
				<dd>第五个:切换标签后当前标签的样式名。</dd>
			</dl>
		</div>
		<p class="item display_none">这里是第四个区域</p>
		<p class="item display_none">第五个</p>
	</div>
</div>
<input type="hidden" id="kp_OtherRegional" value="nav,li,cardarea,item,current_tab|nav2,li,cardarea2,item,current_tab" title="这个必不可少" />
<script type="text/javascript">
/*addLoadEvent.js*/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}
/*addLoadEvent.js结束*/
/*switch_display_area.js*/
function getConfigInputObj(){
	if(!document.getElementById || !document.getElementsByTagName)return;
	var configObj=document.getElementById("kp_OtherRegional");if(configObj==null)return;
	var configValue=configObj.getAttribute("value").replace(/\s/g,"");
	var configArray=configValue.split("|")
	var length=configArray.length;
	var childConfigArray=null;
	var childConfigValue="";
	for(var i=0;i<length;i++){
		childConfigArray=configArray[i].split(",");
		giveEvent(childConfigArray);
	}
	//destroy(getConfigInputObj);
}
function giveEvent(obj){
	if(obj==null){return;}
	var parentId=obj[0];
	var whichToTrigger=obj[1];
	var itemParent=obj[2];
	var itemClass=obj[3];
	var currentClassName=obj[4];
	var listerEvent=obj[5];
	if(!parentId || !whichToTrigger || !itemParent || !itemClass)return;
	var parentObj=null;
	var whichToTriggerObj=null;
	var itemParentObj=null;
	var itemObj=null;
	/*准备好各个元素*/
	parentObj=document.getElementById(parentId);
	if(!parentObj){return;}
	itemParentObj=document.getElementById(itemParent);
	whichToTriggerObj=parentObj.getElementsByTagName(whichToTrigger);//获取事件源对象的集合
	if(!parentObj || !itemParentObj || !whichToTriggerObj)return;
	itemObj=itemParentObj.getElementsByTagName("*");
	var length=itemObj.length;
	var objArray=new Array();
	for(var i=0;i<itemObj.length;i++){
		if(itemObj[i].className.indexOf(itemClass)>-1){
			objArray.push(itemObj[i]);
		}
	}
	var whichToTriggerObjLength=whichToTriggerObj.length;//获取事件源对象的长度
	var isExistAObj=null;
	for(var i=0;i<whichToTriggerObjLength;i++){
		whichToTriggerObj[i].setAttribute("oldClassName",whichToTriggerObj[i].className.replace(currentClassName));
		whichToTriggerObj[i].setAttribute("currentNum",i);
		if(listerEvent==null){
			whichToTriggerObj[i].onclick=function(){
				//return 
				return correspondingRegion(this,objArray,currentClassName,whichToTriggerObj);
			}
			isExistAObj=whichToTriggerObj[i].getElementsByTagName("a");
			if(isExistAObj.length>0){
				for(var j=0;j<isExistAObj.length;j++){
					isExistAObj[j].onfocus=function(){this.blur();}
				}
			}
		}else{
			whichToTriggerObj[i].onmouseover=function(){
				//return 
				return correspondingRegion(this,objArray,currentClassName,whichToTriggerObj);
			}
		}
		whichToTriggerObj[i].onfocus=function(){
			this.blur();
		}
	}
	//destroy(giveEvent);
}
//功能; 根据传递的参数切换（显示或隐藏）各个区域
function correspondingRegion(obj,objArray,currentClassName,whichToTriggerObj){
	var length=objArray.length;
	var currentNum=parseInt(obj.getAttribute("currentNum"),10);
	if(!objArray[currentNum]){
		/*alert("该div不存在");*/
		return;
	}else{
		/*先将所有样式 “归零”*/
		for(var i=0;i<length;i++){
			objArray[i].style.display="none";
			if(whichToTriggerObj[i]==null){continue;}
			//如果有老的样式
			if(whichToTriggerObj[i].getAttribute("oldClassName")!="" && whichToTriggerObj[i].getAttribute("oldClassName").indexOf(currentClassName)<0){
				whichToTriggerObj[i].className=whichToTriggerObj[i].getAttribute("oldClassName");
			}else if(whichToTriggerObj[i].getAttribute("oldClassName")!=""){
				whichToTriggerObj[i].className=whichToTriggerObj[i].getAttribute("oldClassName");
			}else{
				whichToTriggerObj[i].className="";
			}
		}
		//然后单独给当前对象加上className
		if(objArray[currentNum]!=null){
			objArray[currentNum].style.display="block";
			if(obj.getAttribute("oldClassName")!=""){
				obj.className=currentClassName+" "+obj.getAttribute("oldClassName");
			}else{
				obj.className=currentClassName;
			}
			//return false;
		}else{
			//return true;
		}
		return false;
	}
}
addLoadEvent(getConfigInputObj);
/*switch_display_area.js结束*/
</script>
</body>
</html>

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

[ 本帖最后由 yoom 于 2008-9-9 16:09 编辑 ]

年后到上海

TOP

l195366149

新手上路

帖子: 12
体力: 33
威望: 0
离线: 57 天

14^# 大中小发表于 2008-9-9 16: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=utf-8" />
<title>选项卡</title>
<style type="text/css">
/*
	选项卡
----------------------------------------------------------------
*/
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:12px auto 0 auto;width:600px;}
h1,h2,h3,h4,h5,h6,p,form,dl,dt,dd,ul,ol{margin:0;padding:0;font-size:100%;}
ul{list-style:none;}
a{text-decoration:none;}
.display_none{display:none;}
/*选项卡的样式*/
.convention_tab{clear:both;width:100%;float:left;margin:15px 0 0 0;background:url(http://4.bp.blogspot.com/_bdBPvgEipxw/SMSk_BkFfaI/AAAAAAAAABQ/Auzj-1HXF1E/s320/switch_area.gif) left bottom repeat-x;padding-bottom:3px;overflow:hidden;padding-right:0px;}/*如果下面的区域是table，那么padding-right:2px;*/
	.convention_tab li{float:left;background:url(http://4.bp.blogspot.com/_bdBPvgEipxw/SMSk_BkFfaI/AAAAAAAAABQ/Auzj-1HXF1E/s320/switch_area.gif) right top no-repeat;margin-left:-12px;padding:0 30px 0 11px;}
		.convention_tab li a,.convention_tab li.normal_tab b{color:#fff;display:block;height:19px;float:left; background:#3C6084;padding-top:3px;}
	.convention_tab li.current_tab{background-position:right -100px;border-left:solid 2px #fff; padding-bottom:2px;}
		.convention_tab li.current_tab a{background-color:#98B1C5;color:#000;}
	.convention_tab li.start_tab{margin-left:0;padding-left:0;border-left:none;}
		.convention_tab li.start_tab a{padding-left:10px;}
	.convention_tab li#end_tab{background-position:right -50px;}
		.convention_tab li#end_tab a{padding-left:10px;}
	.convention_tab li.current_tab#end_tab{background-position:right -140px;}
		.convention_tab li.current_tab#end_tab a{background-color:#98B1C5;}
	/*每个item*/
	#cardarea,#cardarea2{border:solid 1px #3D5F85;clear:both;border-top:none;}
		#cardarea p,#cardarea2 p{padding:20px;text-align:left;line-height:23px;}
	#cardarea2 dl{text-align:left;padding:20px;line-height:23px;}
</style>
</head>
<body>
<div class="container">
	<ul id="nav" class="convention_tab">
		<li class="start_tab current_tab"><a href="#">选项卡001</a></li>
		<li><a href="#">缺点</a></li>
		<li><a href="#">仅供娱乐</a></li>
		<li><a href="#">选项卡004</a></li>
		<li id="end_tab"><a href="#">选项卡005</a></li>
	</ul>
	<div id="cardarea">
		<div class="item"><p>这里是div中的p标签，因为没有指定class为item，所以我不参与切换。</p></div>
		<p class="item display_none">我在页面加载完成后才添加的事件，可有的图片加载很慢，所以有时候可以把外部js中的addLoadEvent(getConfigInputObj);删除掉，然后直接书写 getConfigInputObj();当然要放在&lt;/html&gt;以保证xhtml已经加载完毕</p>
		<p class="item display_none">看网上演示Jquery的tab插件更加强大，不过我这个更为实用，o(∩_∩)o...。</p>
		<p class="item display_none">第四个</p>
		<p class="item display_none">第五个</p>
	</div>
	<ul id="nav2" class="convention_tab">
		<li class="start_tab current_tab"><a href="#">优点</a></li>
		<li><a href="#">使用方法</a></li>
		<li><a href="#">参数的意思</a></li>
		<li><a href="#">第4个</a></li>
		<li id="end_tab"><a href="#">最后一个</a></li>
	</ul>
	<div id="cardarea2">
		<p class="item">重用性极高,在IE6+,Firefox2+,Opera9中均能正常工作，且并没有使用hack。</p>
		<p class="item display_none"> <span style="font-family:Georgia, 'Times New Roman', Times, serif;"> &lt;input type="hidden" id="kp_OtherRegional" value="nav,li,cardarea,item,current_tab|nav2,li,cardarea2,item,current_tab" title="这个必不可少" /&gt; </span>即可完成事件添加,多个区域用竖线隔开。</p>
			<div class="item display_none">
			<dl>
				<dt>id为kp_OtherRegional的input元素共有5个参数</dt>
				<dd>第一个:表示id为nav的那个元素。</dd>
				<dd>第二个:获取到第一步的元素，遍历指定的元素，这取决于你写的什么标签，写的li它就会遍历li。</dd>
				<dd>第三个:切换区域的父容器,切换区域的父容器ID</dd>
				<dd>第四个:&lt;p class="item",这里没有限定是什么元素，而是限定带有指定class的才能参与切换。</dd>
				<dd>第五个:切换标签后当前标签的样式名。</dd>
			</dl>
		</div>
		<p class="item display_none">这里是第四个区域</p>
		<p class="item display_none">第五个</p>
	</div>
</div>
<input type="hidden" id="kp_OtherRegional" value="nav,li,cardarea,item,current_tab|nav2,li,cardarea2,item,current_tab" title="这个必不可少" />
<script type="text/javascript">
/*addLoadEvent.js*/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}
/*addLoadEvent.js结束*/
/*switch_display_area.js*/
function getConfigInputObj(){
	if(!document.getElementById || !document.getElementsByTagName)return;
	var configObj=document.getElementById("kp_OtherRegional");if(configObj==null)return;
	var configValue=configObj.getAttribute("value").replace(/\s/g,"");
	var configArray=configValue.split("|")
	var length=configArray.length;
	var childConfigArray=null;
	var childConfigValue="";
	for(var i=0;i<length;i++){
		childConfigArray=configArray[i].split(",");
		giveEvent(childConfigArray);
	}
	//destroy(getConfigInputObj);
}
function giveEvent(obj){
	if(obj==null){return;}
	var parentId=obj[0];
	var whichToTrigger=obj[1];
	var itemParent=obj[2];
	var itemClass=obj[3];
	var currentClassName=obj[4];
	var listerEvent=obj[5];
	if(!parentId || !whichToTrigger || !itemParent || !itemClass)return;
	var parentObj=null;
	var whichToTriggerObj=null;
	var itemParentObj=null;
	var itemObj=null;
	/*准备好各个元素*/
	parentObj=document.getElementById(parentId);
	if(!parentObj){return;}
	itemParentObj=document.getElementById(itemParent);
	whichToTriggerObj=parentObj.getElementsByTagName(whichToTrigger);//获取事件源对象的集合
	if(!parentObj || !itemParentObj || !whichToTriggerObj)return;
	itemObj=itemParentObj.getElementsByTagName("*");
	var length=itemObj.length;
	var objArray=new Array();
	for(var i=0;i<itemObj.length;i++){
		if(itemObj[i].className.indexOf(itemClass)>-1){
			objArray.push(itemObj[i]);
		}
	}
	var whichToTriggerObjLength=whichToTriggerObj.length;//获取事件源对象的长度
	var isExistAObj=null;
	for(var i=0;i<whichToTriggerObjLength;i++){
		whichToTriggerObj[i].setAttribute("oldClassName",whichToTriggerObj[i].className.replace(currentClassName));
		whichToTriggerObj[i].setAttribute("currentNum",i);
		if(listerEvent==null){
			whichToTriggerObj[i].onclick=function(){
				//return 
				return correspondingRegion(this,objArray,currentClassName,whichToTriggerObj);
			}
			isExistAObj=whichToTriggerObj[i].getElementsByTagName("a");
			if(isExistAObj.length>0){
				for(var j=0;j<isExistAObj.length;j++){
					isExistAObj[j].onfocus=function(){this.blur();}
				}
			}
		}else{
			whichToTriggerObj[i].onmouseover=function(){
				//return 
				return correspondingRegion(this,objArray,currentClassName,whichToTriggerObj);
			}
		}
		whichToTriggerObj[i].onfocus=function(){
			this.blur();
		}
	}
	//destroy(giveEvent);
}
//功能; 根据传递的参数切换（显示或隐藏）各个区域
function correspondingRegion(obj,objArray,currentClassName,whichToTriggerObj){
	var length=objArray.length;
	var currentNum=parseInt(obj.getAttribute("currentNum"),10);
	if(!objArray[currentNum]){
		/*alert("该div不存在");*/
		return;
	}else{
		/*先将所有样式 “归零”*/
		for(var i=0;i<length;i++){
			objArray[i].style.display="none";
			if(whichToTriggerObj[i]==null){continue;}
			//如果有老的样式
			if(whichToTriggerObj[i].getAttribute("oldClassName")!="" && whichToTriggerObj[i].getAttribute("oldClassName").indexOf(currentClassName)<0){
				whichToTriggerObj[i].className=whichToTriggerObj[i].getAttribute("oldClassName");
			}else if(whichToTriggerObj[i].getAttribute("oldClassName")!=""){
				whichToTriggerObj[i].className=whichToTriggerObj[i].getAttribute("oldClassName");
			}else{
				whichToTriggerObj[i].className="";
			}
		}
		//然后单独给当前对象加上className
		if(objArray[currentNum]!=null){
			objArray[currentNum].style.display="block";
			if(obj.getAttribute("oldClassName")!=""){
				obj.className=currentClassName+" "+obj.getAttribute("oldClassName");
			}else{
				obj.className=currentClassName;
			}
			//return false;
		}else{
			//return true;
		}
		return false;
	}
}
addLoadEvent(getConfigInputObj);
/*switch_display_area.js结束*/
</script>
</body>
</html>

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

TOP

by0001

冰极峰

银牌会员

帖子: 767
体力: 1573
威望: 28
当前: 广东深圳

专长 前端制作

15^# 大中小发表于 2008-9-9 16:51

相当的不错,如果菜单按钮再加一个翻滚状态,更是完美了!

冰极峰博客

TOP

yoom [楼主]

木匠的背篓

版主

认证
帖子: 2488
体力: 3628
威望: 3
当前: 四川达州

专长 前端制作,JS

16^# 大中小发表于 2008-9-10 11:05

再来一个三层嵌套的，还可以做N层：

<!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=utf-8" />
<title>选项卡</title>
<style type="text/css">
/*
	选项卡
----------------------------------------------------------------
*/
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:12px auto 0 auto;width:600px;position:relative;}
h1,h2,h3,h4,h5,h6,p,form,dl,dt,dd,ul,ol{margin:0;padding:0;font-size:100%;}
ul{list-style:none;}
a{text-decoration:none;color:#000;}
.display_none{display:none;}
.container{clear:both; width:100%;float:left;}
/*选项卡的样式*/
.convention_tab{width:100%;text-align:left;float:left;}
.convention_tab li{margin:0;padding:0;float:left;padding-right:10px;position:relative;z-index:2;bottom:-1px;}
.convention_tab li a{background:#eee;height:28px;line-height:28px;overflow:hidden;float:left;padding:0 8px;border:solid 1px #444;border-bottom:none;}
.convention_tab li.important a,.convention_tab li.important a:hover{background:#777;color:#fff;}
.convention_tab li a:hover{background:#e0e0e0;color:#000;}
/*选中后的样式*/
.convention_tab li.current_tab a,.convention_tab li.current_tab a:hover{background:#999;color:#fff;padding-top:1px;}
/*单独设置第二个tab的某些样式*/
#nav2 li.current_tab a,#nav2 li.current_tab a:hover{background:#ffffe1;color:#000;}
/*第2层*/
#childArea{border:solid 1px #f60;clear:both;}
#child_tab li a{background:#ffaaaa;border:solid 1px #a00;}
#child_tab li.current_tab a,#child_tab li .current_tab a:hover{border:solid 1px red;border-bottom:none;background:#f20;}
/*第三层*/
#childArea2{clear:both;border:solid 1px #0a0;}
#child_tab2 li a{border:solid 1px #0a0;background:#f6fff6;}
#child_tab2 li.current_tab a,#child_tab2 li .current_tab a:hover{border:solid 1px #0a0;border-bottom:none;background:#0a0;}
/*其它*/
#cardarea,#cardarea2{border:solid 1px #666;text-align:left;clear:both;}
#cardarea p,#cardarea2 p,#cardarea2 dl{padding:20px;line-height:23px;}
#nav2{margin-top:18px;}
</style>
</head>
<body>
<h1 style="font-size:120%;text-align:left;margin:20px;">注意：如果是嵌套关系，那么配置域中对应的第4个参数不能相同，如果两个tab不存在嵌套关系，那么就无所谓。</h1>
<div class="container">
	<ul id="nav" class="convention_tab">
		<li class="current_tab"><a href="#">选项卡001</a></li>
		<li><a href="#">缺点</a></li>
		<li><a href="#">仅供娱乐</a></li>
		<li><a href="#">选项卡004</a></li>
		<li class="important"><a href="#">嵌套子选项卡</a></li>
	</ul>
	<div id="cardarea">
		<div class="item"><p>这里是div中的p标签，因为没有指定class为item，所以我不参与切换。</p></div>
		<p class="item display_none">我在页面加载完成后才添加的事件，可有的图片加载很慢，所以有时候可以把外部js中的addLoadEvent(getConfigInputObj);删除掉，然后直接书写 getConfigInputObj();当然要放在&lt;/html&gt;以保证xhtml已经加载完毕</p>
		<p class="item display_none">看网上演示Jquery的tab插件更加强大，不过我这个更为实用，o(∩_∩)o...。</p>
		<p class="item display_none">第四个</p>
		<div class="item display_none" style="padding:10px;">
			<ul class="convention_tab" id="child_tab">
				<li class="current_tab"><a href="#">子选项卡01</a></li>
				<li><a href="#">子选项卡02</a></li>
				<li><a href="#">嵌套子选项卡003</a></li>
			</ul>
			<div id="childArea">
				<p class="childItem">0001111</p>
				<p class="childItem display_none">0002222</p>
				<div class="childItem display_none" style="padding:10px;">
					<ul class="convention_tab" id="child_tab2">
						<li class="current_tab"><a href="#">第三层002</a></li>
						<li><a href="#">第三层002</a></li>
						<li><a href="#">第三层003</a></li>
					</ul>
					<div id="childArea2">
						<p class="sItem">第三层001的区域，多层嵌套</p>
						<p class="sItem display_none">第三层002的区域，多层嵌套</p>
						<p class="sItem display_none">第三层003的区域，多层嵌套</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<ul id="nav2" class="convention_tab">
		<li class="current_tab"><a href="#">优点</a></li>
		<li><a href="#">使用方法</a></li>
		<li><a href="#">参数的意思</a></li>
		<li><a href="#">第4个</a></li>
		<li><a href="#">最后一个</a></li>
	</ul>
	<div id="cardarea2">
		<p class="item">重用性极高,在IE6+,Firefox2+,Opera9中均能正常工作，且并没有使用hack。</p>
		<p class="item display_none"> <span style="font-family:Georgia, 'Times New Roman', Times, serif;"> &lt;input type="hidden" id="kp_OtherRegional" value="nav,li,cardarea,item,current_tab|nav2,li,cardarea2,item,current_tab" title="这个必不可少" /&gt; </span>即可完成事件添加,多个区域用竖线隔开。</p>
			<div class="item display_none">
			<dl>
				<dt>id为kp_OtherRegional的input元素共有5个参数</dt>
				<dd>第一个:表示id为nav的那个元素。</dd>
				<dd>第二个:获取到第一步的元素，遍历指定的元素，这取决于你写的什么标签，写的li它就会遍历li。</dd>
				<dd>第三个:切换区域的父容器,切换区域的父容器ID</dd>
				<dd>第四个:&lt;p class="item",这里没有限定是什么元素，而是限定带有指定class的才能参与切换。</dd>
				<dd>第五个:切换标签后当前标签的样式名。</dd>
			</dl>
		</div>
		<p class="item display_none">这里是第四个区域</p>
		<p class="item display_none">第五个</p>
	</div>
</div>
<input type="hidden" id="kp_OtherRegional" value="nav,li,cardarea,item,current_tab|nav2,li,cardarea2,item,current_tab|child_tab,li,childArea,childItem,current_tab|child_tab2,li,childArea2,sItem,current_tab" title="这个必不可少" />
<script type="text/javascript">
/*addLoadEvent.js*/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}
/*addLoadEvent.js结束*/
/*switch_display_area.js*/
function getConfigInputObj(){
	if(!document.getElementById || !document.getElementsByTagName)return;
	var configObj=document.getElementById("kp_OtherRegional");if(configObj==null)return;
	var configValue=configObj.getAttribute("value").replace(/\s/g,"");
	var configArray=configValue.split("|")
	var length=configArray.length;
	var childConfigArray=null;
	var childConfigValue="";
	for(var i=0;i<length;i++){
		childConfigArray=configArray[i].split(",");
		giveEvent(childConfigArray);
	}
	//destroy(getConfigInputObj);
}
function giveEvent(obj){
	if(obj==null){return;}
	var parentId=obj[0];
	var whichToTrigger=obj[1];
	var itemParent=obj[2];
	var itemClass=obj[3];
	var currentClassName=obj[4];
	var listerEvent=obj[5];
	if(!parentId || !whichToTrigger || !itemParent || !itemClass)return;
	var parentObj=null;
	var whichToTriggerObj=null;
	var itemParentObj=null;
	var itemObj=null;
	/*准备好各个元素*/
	parentObj=document.getElementById(parentId);
	if(!parentObj){return;}
	itemParentObj=document.getElementById(itemParent);
	whichToTriggerObj=parentObj.getElementsByTagName(whichToTrigger);//获取事件源对象的集合
	if(!parentObj || !itemParentObj || !whichToTriggerObj)return;
	itemObj=itemParentObj.getElementsByTagName("*");
	var length=itemObj.length;
	var objArray=new Array();
	for(var i=0;i<itemObj.length;i++){
		if(itemObj[i].className.indexOf(itemClass)>-1){
			objArray.push(itemObj[i]);
		}
	}
	var whichToTriggerObjLength=whichToTriggerObj.length;//获取事件源对象的长度
	var isExistAObj=null;
	for(var i=0;i<whichToTriggerObjLength;i++){
		whichToTriggerObj[i].setAttribute("oldClassName",whichToTriggerObj[i].className.replace(currentClassName));
		whichToTriggerObj[i].setAttribute("currentNum",i);
		if(listerEvent==null){
			whichToTriggerObj[i].onclick=function(){
				//return 
				return correspondingRegion(this,objArray,currentClassName,whichToTriggerObj);
			}
			isExistAObj=whichToTriggerObj[i].getElementsByTagName("a");
			if(isExistAObj.length>0){
				for(var j=0;j<isExistAObj.length;j++){
					isExistAObj[j].onfocus=function(){this.blur();}
				}
			}
		}else{
			whichToTriggerObj[i].onmouseover=function(){
				//return 
				return correspondingRegion(this,objArray,currentClassName,whichToTriggerObj);
			}
		}
		whichToTriggerObj[i].onfocus=function(){
			this.blur();
		}
	}
	//destroy(giveEvent);
}
//功能; 根据传递的参数切换（显示或隐藏）各个区域
function correspondingRegion(obj,objArray,currentClassName,whichToTriggerObj){
	var length=objArray.length;
	var currentNum=parseInt(obj.getAttribute("currentNum"),10);
	if(!objArray[currentNum]){
		/*alert("该div不存在");*/
		return;
	}else{
		/*先将所有样式 “归零”*/
		for(var i=0;i<length;i++){
			objArray[i].style.display="none";
			if(whichToTriggerObj[i]==null){continue;}
			//如果有老的样式
			if(whichToTriggerObj[i].getAttribute("oldClassName")!="" && whichToTriggerObj[i].getAttribute("oldClassName").indexOf(currentClassName)<0){
				whichToTriggerObj[i].className=whichToTriggerObj[i].getAttribute("oldClassName");
			}else if(whichToTriggerObj[i].getAttribute("oldClassName")!=""){
				whichToTriggerObj[i].className=whichToTriggerObj[i].getAttribute("oldClassName");
			}else{
				whichToTriggerObj[i].className="";
			}
		}
		//然后单独给当前对象加上className
		if(objArray[currentNum]!=null){
			objArray[currentNum].style.display="block";
			if(obj.getAttribute("oldClassName")!=""){
				obj.className=currentClassName+" "+obj.getAttribute("oldClassName");
			}else{
				obj.className=currentClassName;
			}
			//return false;
		}else{
			//return true;
		}
		return false;
	}
}
addLoadEvent(getConfigInputObj);
/*switch_display_area.js结束*/
</script>
</body>
</html>

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

[ 本帖最后由 yoom 于 2008-9-10 15:04 编辑 ]

年后到上海

TOP

寒号鸟11

初级会员

帖子: 197
体力: 199
威望: 0
离线: 396 天

17^# 大中小发表于 2008-9-10 16:17

不错,板凳下

一个人的天荒地老......

TOP

togoog

天使共舞

银牌会员

帖子: 616
体力: 1254
威望: 0
当前: 北京海淀区
离线: 22 天

专长 网页设计,ASP,搜索

18^# 大中小发表于 2008-9-12 10:49

不错，学习了。。

一起的力量~一起杀毒网

TOP

tangl198710

啸天皇帝

银牌会员

帖子: 560
体力: 1236
威望: 0
当前: 广东深圳

专长 JS,PHP,MySQL

19^# 大中小发表于 2008-9-12 13:24

学习中...

TOP

downup

初级会员

帖子: 28
体力: 50
威望: 0
离线: 491 天

20^# 大中小发表于 2008-9-12 13:41

学习了

-------------------------
请勿在回复中夹带广告。--- kalloer

cdgome.cn

TOP

vvsamln

代码艺术

中级会员

认证
帖子: 369
体力: 483
威望: 0
当前: 河北邯郸
离线: 19 天

专长 前端制作,.NET,网管

21^# 大中小发表于 2008-9-12 14:00

封装起来是不是更好了

不错收藏了

玩不丧志

TOP

yoom [楼主]

木匠的背篓

版主

认证
帖子: 2488
体力: 3628
威望: 3
当前: 四川达州

专长 前端制作,JS

22^# 大中小发表于 2008-9-22 14:34

是的！
封装起来，以后调用就更方便。

年后到上海

TOP

oybp

初级会员

帖子: 59
体力: 58
威望: 0
离线: 62 天

23^# 大中小发表于 2008-9-22 15:40

这个选项卡不错，说不定用的上

TOP

dan6955178

新手上路

帖子: 8
体力: 25
威望: 0
当前: 江西南昌
离线: 16 天

24^# 大中小发表于 2008-9-22 21:30

收下了以后会用到的谢谢楼主

TOP

mqycn

勿弃

中级会员

帖子: 168
体力: 375
威望: 2
当前: 山东济南
离线: 35 天

专长 JS,PHP,ASP

25^# 大中小发表于 2008-9-22 21:42

欺骗感情，竟然说是纯手工代码~
我看也有一部分函数出自xx框架

这个我不是很认可~用了就是用了

猫七

TOP

yoom [楼主]

木匠的背篓

版主

认证
帖子: 2488
体力: 3628
威望: 3
当前: 四川达州

专长 前端制作,JS

26^# 大中小发表于 2008-9-22 22:12

请楼上指出是哪一部分用到了框架，不胜感谢。

[ 本帖最后由 yoom 于 2008-9-22 22:14 编辑 ]

年后到上海

TOP

fit

MIT

银牌会员

帖子: 385
体力: 1143
威望: 0
当前: 广东广州
离线: 2 天

专长 .NET,C/C++,系统分析

27^# 大中小发表于 2008-9-22 23:38

不错。

不要爱上哥,哥只是个传说

TOP

mqycn

勿弃

中级会员

帖子: 168
体力: 375
威望: 2
当前: 山东济南
离线: 35 天

专长 JS,PHP,ASP

28^# 大中小发表于 2008-9-23 03:07

误判~

在这里向给YOOM道歉~
因为看到了这个代码，就没有往下看，以为实用的是框架~
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
window.onload = func;
  } else {
window.onload = function() {
   oldonload();
   func();
}
  }
}

猫七

TOP

yoom [楼主]

木匠的背篓

版主

认证
帖子: 2488
体力: 3628
威望: 3
当前: 四川达州

专长 前端制作,JS

29^# 大中小发表于 2008-9-23 09:10

没关系，很少有人能完整看完，确实有点长。

年后到上海

TOP

jackydion

初级会员

帖子: 66
体力: 88
威望: 0
当前: 北京海淀区
离线: 135 天

30^# 大中小发表于 2008-9-23 09:25

留个标记，用的时候来看看，哈哈

松弛有肚肚

TOP