符合標準的紅色網頁選項卡（簡潔）

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   class="tbnzbjj"   id="nav"> <ul><li>ASP</li><li>PHP</li></ul></div><div   class="bbnrljb"   id="nav_content"><div style="display:none">ASP是微軟開發的一種動態網頁技術……</div><div style="display:none">PHP是一種開源的動態網頁技術……</div></div></body></html>

上一篇：CSS+JS三級滑動菜單

下一篇：博客里的豎向純CSS圓角導航欄

學習交流

如何查找有故障的配件

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

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注