位置：首页>> 网络编程>> 网页设计>> 仿淘宝网站的导航标签效果！

仿淘宝网站的导航标签效果！

作者：快乐笛子　来源：快乐笛子的博客　发布时间：2008-11-05 12:37:00　

标签：淘宝,选项卡,导航,标签,css

这是我以前发表在经典论坛的帖子，现在转贴回来。

仿淘宝网站的导航效果。此方法有几个优点：

根据字数自适应项目长度
不同的项目使用不同的颜色来区分
无需使用脚本
背景图片只需要两个图片文件就足够，减少服务器负担

从平时的应用上看，这种方法还是比较有用的。经marvellous指点后，加入javascript，可以单页面内切换内容了，但却不适合做网站的导航条。

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>仿淘宝选项卡导航 - asp之家</title><style type="text/css"></style><script language="javascript">function switchTag(tag,content){//alert(tag);//alert(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"><a href="#" onclick="switchTag('tag1','content1');this.blur();" class="selectli1"><span class="selectspan1">首页</span></a></li> <li id="tag2"><a href="#" onclick="switchTag('tag2','content2');this.blur();"><span>下载中心</span></a></li> <li id="tag3"><a href="#" onclick="switchTag('tag3','content3');this.blur();"><span>产品介绍</span></a></li> <li id="tag4"><a href="#" onclick="switchTag('tag4','content4');this.blur();"><span>会员注册与登录</span></a></li> <li id="tag5"><a href="#" onclick="switchTag('tag5','content5');this.blur();"><span>联系我们</span></a></li> </ul> </div><div id="content" class="content1"> <div id="content1"><p>仿淘宝网站的导航效果。此方法有几个优点：</p>1、根据字数自适应项目长度</div> <div id="content2" class="hidecontent">2、不同的项目使用不同的颜色来区分</div> <div id="content3" class="hidecontent">3、这回需要使用到js了，呵呵</div> <div id="content4" class="hidecontent">4、背景图片只需要两个图片文件就足够，减少服务器负担</div> <div id="content5" class="hidecontent">5、这是使用到的两个图片： <table width="58％" border="1" cellspacing="2" cellpadding="0"> <tr> <td width="70％" align="center"><img src="https://img.aspxhome.com/file/UploadPic/200811/5/tab_selected_left_bk2-37.gif" width="250" height="290" /></td> <td width="30％" align="center"><img src="https://img.aspxhome.com/file/UploadPic/200811/5/tab_selected_right_bk2-82.gif" width="15" height="290" /></td> </tr> </table> </div></div> </div></body></html>

投稿

仿淘宝网站的导航标签效果！

猜你喜欢