仿淘宝网的网页选项卡（超级漂亮）

2024-09-05 12:19:47

字体：大中小

来源：转载

供稿：网友

这是仿淘宝网的网页选项卡，CSS+JavaScript技术结合共同打造，超级漂亮，而且只用到了两个背景图片，不但很实用，而且本代码还有一个很值得学习的亮点，就是学习如何使用CSS控制背景图片的某个区域生效，这对你以后的WEB标准化之路帮助很大。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>网页选项卡</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><STYLE type=text/css>  </STYLE><SCRIPT language=javascript> function switchTag(tag,content) {     for(i=1; i <6; i++)     {         if ("tag"+i==tag)         {             document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i;             document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span") [0].className="selectspan"+i;         }else{             document.getElementById("tag"+i).getElementsByTagName("a")[0].className="";             document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span") [0].className="";         }         if ("content"+i==content)         {             document.getElementById(content).className="";         }else{             document.getElementById("content"+i).className="hidecontent";         }         document.getElementById("content").className=content;     } } </SCRIPT></head> <body><DIV id=container><DIV id=title><UL><LI id=tag1><SPAN class=selectspan1>网站首页</SPAN> </LI><LI id=tag2><SPAN>下载中心</SPAN> </LI><LI id=tag3><SPAN>网页特效</SPAN> </LI><LI id=tag4><SPAN>会员注册与登录</SPAN> </LI><LI id=tag5><SPAN>所用图片</SPAN> </LI></UL></DIV><DIV class=content1 id=content><DIV id=content1><P>仿淘宝网站的导航效果。此方法有几个优点：</P>1、根据字数自适应项目长度</DIV><DIV class=hidecontent id=content2>2、高质量源代码下载。</DIV><DIV class=hidecontent id=content3>3、源码爱好者每一个都是精品，全心全意服务大家，哈哦！</DIV><DIV class=hidecontent id=content4>4、背景图片只需两个就足够了，减少服务器负担</DIV><DIV class=hidecontent id=content5>5、这是本选项卡所使用到的两个图片，请保存： <TABLE cellSpacing=2 cellPadding=0 width="58%" border=1><TBODY><TR><TD align=middle width="70%"><IMG height=290 src="/d/file/p/2024/09-05/969c01243e0dd124c2ef7043decaa2ca.gif" width=250></TD><TD align=middle width="30%"><IMG height=290 src="/d/file/p/2024/09-05/5ec17c5ea500ed81ac364e9affb830ec.gif" width=15></TD></TR></TBODY></TABLE></DIV></DIV></DIV></body></html>

上一篇：隐藏在左侧，鼠标点击展开CSS菜单

下一篇：同一网页使用多个滑动门（选项卡）的方法