符合标准的红色网页选项卡（简洁）

2024-09-05 12:19:34

字体：大中小

来源：转载

供稿：网友

符合WEB标准的一款极简洁的网页选项卡，红色风格，当然，颜色是可以修改的，选项卡与滑动门的区别就是滑动门是鼠标放上后触发，选项卡是鼠标点击后触发，其实核心程序大部分是一样的。

<html><head><title>符合标准的红色网页选项卡（简洁）</title><meta http-equiv="content-Type" content="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_content{	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+"_content").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>ASP</li><li>PHP</li></ul></div><div id="nav_content"><div style="display:none">ASP是微软开发的一种动态网页技术……</div><div style="display:none">PHP是一种开源的动态网页技术……</div></div></body></html>

上一篇：CSS+JS三级滑动菜单

下一篇：博客里的竖向纯CSS圆角导航栏

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注