一個選項卡Tab的雛形_菜單導航特效

自己封裝了一個選項卡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" mrc="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>

所屬頻道：菜單導航特效/更新時間：2011-02-24

[收藏][報錯][返回列表]

相關菜單導航特效：

一個選項卡Tab的雛形_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些