仿 Yahoo的 Tab菜单

2006-12-13 15:27:45

唉,做美工真无赖,还要搞代码,布局CSS,这不,今天又弄起了Tab Menu 老板要我做一个像Yahoo那样的Tab,看了他的代码,恐怖,大堆大堆的包,看得我眼花。。。 没法,上网去找相关的东东。 在Baidu上搜索了半天,没有结果,干脆自己来一个吧! 代码写的很杂,见量,哈哈哈 [html] <html> <head> <meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=gb2312&#34; /> <title>无标题文档</title> <style type=&#34;text/css&#34;> Body{font-size:12px;font-family:&#34;宋体&#34;;} ul{ padding:0px;margin:0px; } li{padding:0px;margin:0px;list-style:none; } .header{ } .header ul{ background:url(/img/block_mnu_bg.gif); height:32px; } .header a{ display:block; background:no-repeat left top; padding:9px 1px 7px 7px; } .header li{ float:left; text-align:center; background:no-repeat right top; padding:0 4px 0 0px; margin:0px 2px; margin-bottom:-20px; } .header img{ margin-top:-13px; } .header #game-current{ background:url(/img/block_mnu_right.gif) no-repeat right top; } .header #game-current a{ background:url(/img/block_mnu_left.gif) no-repeat left top; font-weight:bold; padding-top:7px; color:white; text-decoration:none; } .header #game-current a:hover{ text-decoration:underline; } </style> </head> <body> <div class=&#34;header&#34;> <ul> <li id=&#34;game-current&#34;><a href=&#34;#&#34; onclick=&#34;doChangeHeader(this,1)&#34;>我的目标</a><img src=&#34;/img/header_arrow.gif&#34; /></li> <li><a href=&#34;#&#34; onclick=&#34;doChangeHeader(this,1)&#34;>扫地僧</a><img src=&#34;/img/header_arrow.gif&#34; style=&#34;display:none&#34; /></li> <li><a href=&#34;#&#34; onclick=&#34;doChangeHeader(this,1)&#34;>高僧</a><img src=&#34;/img/header_arrow.gif&#34; style=&#34;display:none&#34;/></li> <li><a href=&#34;#&#34; onclick=&#34;doChangeHeader(this,1)&#34;>方丈</a><img src=&#34;/img/header_arrow.gif&#34; style=&#34;display:none&#34; /></li> </ul> </div> <script language=&#34;javascript&#34;> <!-- // By:kyomic // mail:kyomic@163.com // function doChangeHeader(arg){ var curObj = arg.parentNode; for(var i=0;i<curObj.parentNode.childNodes.length;i++){ var liObj = curObj.parentNode.childNodes[i]; liObj.style.backgroundImage=&#39;url()&#39;; liObj.firstChild.style.backgroundImage=&#39;url()&#39;; liObj.firstChild.style.padding=&#39;9px 1px 7px 7px&#39; liObj.firstChild.nextSibling.style.display=&#39;none&#39;; liObj.id=&#39;&#39;; } curObj.style.backgroundImage=&#39;url(/img/block_mnu_right.gif)&#39;; curObj.firstChild.style.backgroundImage=&#39;url(/img/block_mnu_left.gif)&#39;; curObj.firstChild.style.padding=&#39;7px 1px 7px 7px&#39; var img = curObj.getElementsByTagName(&#34;img&#34;); img[0].style.display=&#39;&#39;; curObj.id = &#39;game-current&#39;; curObj.firstChild.blur(); } --> </script> </body> </html> [/html]