符合标准的红色网页选项卡(简洁)_菜单导航特效

符合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订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些