自己封装了一个选项卡Tab的雏形，代码公开

2024-09-05 12:20:35

字体：大中小

来源：转载

供稿：网友

自己封装了一个选项卡Tab的雏形，鼠标放上去就看到效果了，没有修饰，显得有些粗糙。这里说明一下用法：修改部分 tabs("nav","bb") nav bb对应导航和内容的id，脚本首行 tag1，tag2是对应标签名 addclass是鼠标一上去的导航样式 checkNav,checkWrap是根据class判定导航和内容id里面的标签是否属于滑动门的部分。

<!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>选项卡Tab</title><link href="template.css" type="text/css" rel="stylesheet" media="screen"><style>*{margin:0;padding:0;}body{line-height:22px}.current{background:#f60;color:#fff}dl{overflow:hidden;zoom:1;margin-bottom:30px}dd{float:left;width:100px;text-align:center;list-style:none;cursor:pointer;}li{display:none;}</style></head><body id="body"><dl id="nav">	<dd>1</dd>	<dd>1</dd>	<dd>1</dd>	<dd>1</dd>	<dd class="current">1</dd></dl><ul id="bb">	<li style="display:block">1</li>	<li>2</li>	<li>3</li>	<li>4</li>	<li>5</li></ul><div>修改部分 tabs("nav","bb") nav bb对应导航和内容的id</div><div>脚本首行 tag1，tag2是对应标签名 addclass是鼠标一上去的导航样式 checkNav,checkWrap是根据class判定导航和内容id里面的标签是否属于滑动门的部分</div><script>function tabs(e1,e2){	var tag1="dd",tag2="li",addclass="current",checkNav="",checkWrap="";	var o1=document.getElementById(e1),o2=document.getElementById(e2),ElementNav=new Array();ElementWrap=new Array();	chk=function(e,n){var v=eval("/"+n+"/gi");if(v==undefined){return true}else if(v.test(e.className)){return true};}	function ser(e,arr,g,n){		var tags=e.getElementsByTagName(g),v=0;		for(i=0;i<tags.length;i++){			if(chk(tags[i],n)==true){arr[v]=tags[i];v++;};		}	}	function Start(e,f){		var s=e.length;		for(i=0;i<s;i++){			e[i].onmouseover=function(){mOver(this)}		}		function mOver(obj){			for(var i=0;i<s;i++){				f[i].style.display="none";				e[i].className="";			}			for(var i=0;i<s;i++){				if(e[i]==obj){f[i].style.display="block";e[i].className=addclass}			}		}	}	ser(o1,ElementNav,tag1,checkNav);	ser(o2,ElementWrap,tag2,checkWrap);	Start(ElementNav,ElementWrap)}tabs("nav","bb")</script></body></html>

上一篇：围成3D模型的JS图片旋转展示代码

下一篇：jQuery 菜单，可智能判断是否是当前导航，并加标记

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注