符合標準的紅色網頁選項卡(簡潔)_菜單導航特效

符合WEB標準的一款極簡潔的網頁選項卡，紅色風格，當然，顏色是可以修改的，選項卡與滑動門的區別就是滑動門是鼠標放上后觸發，選項卡是鼠標點擊后觸發，實在核心程序大部分是一樣的。

<html>
<head>
<title>符合標準的紅色網頁選項卡（簡潔）</title>
<meta http-equiv="mrc-Type" mrc="text/html;charset=gb2312">
<style>
*{
	margin:0;
	padding:0;
}
body{
	font-size:12px;
}
.selected{
	background:#ff6600 no-repeat;
	color:#fff
}
ul{
	height:23px;
	line-height:23px;
	list-style:none;
}
li{
	float:left;
	width:69px;
	height:23px;
	text-align:center;
	cursor:pointer;
}
#nav_mrc{
	margin:0px;
	padding:10px;
	width:300px;
	height:140px;
	border:1px solid #ff6600;
}
</style>
<script>
var net={};
net.tab={};
if (typeof($) == 'undefined') {
  $ = function(elem) {
    if (arguments.length > 1) {
      for (var i = 0, elems = [], length = arguments.length; i < length; i++)
        elems.push($(arguments[i]));
      return elems;
    }
    if (typeof elem == 'string') {
      return document.getElementById(elem);
    } else {
    	return elem;
    }
  };
}
net.tab.objSelect=function(clickobj,obj,elems){
	for(var i=0;i<obj.length;i++)
	{
		obj[i].className="";
		elems[i].style.display="none";
	}
	clickobj.className="selected";
	elems[clickobj.getAttribute("name")].style.display="";
}
net.tab.menuEvent=function(elem,num){
	var objs=$(elem).getElementsByTagName("li");
	var conobjs=$(elem+"_mrc").getElementsByTagName("div");
	objs[num].className="selected";
	conobjs[num].style.display="";
	net.tab.addEvent(objs,function (){
	net.tab.objSelect(this,objs,conobjs);
	});
}

net.tab.addEvent=function(elems,fun){
	for (var i=0;i<elems.length;i++)
	{
	elems[i].setAttribute("name",i);
	elems[i].onclick=fun;
	}
}
window.onload=function(){
net.tab.menuEvent("nav",0)
}
</script>
</head>
<body>
		
<div id="nav"> 
<ul><li>模板無憂</li><li>最新更新</li></ul>
</div>
<div id="nav_mrc">
<div style="display:none">模板無憂是一個有質量的源碼下載站，歡迎光臨……</div>
<div style="display:none">最新更新的源代碼，歡迎下載……</div>
</div>
</body>
</html>

所屬頻道：菜單導航特效/更新時間：2010-05-22

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

相關菜單導航特效：

符合標準的紅色網頁選項卡(簡潔)_菜單導航特效

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

菜單導航特效推薦

猜你也喜歡看這些