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

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

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

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

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

从平时的应用上看，这种方法还是比较有用的。经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>

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

投稿

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

猜你喜欢

Mysql5写中文乱码问题解决

使用sp_xml_preparedocument处理XML文档的方法

CSS模块化设计

html中的sub与sup标签

ASP调用数据库常见错误的解决

两段不错的JS文字特效

页面编码的doctype声明

IE6下的CSS BUG枚举

Frontpage中网页字体的美化研究

ASP链接Mysql数据库非DSN连接的方法

浅析SQL Server 2008企业级新特性

注册表单的规则——读《Patterns for Sign Up &Ramp Up》

Dreamweaver MX技巧之超链接

如何使用XML实现多渠道接入网站的构架

傲游对开发人员的影响越来越大了

Oracle 创建监控账户提高工作效率

浅析ASP内置组件

Oracle 触发器的使用小结

java.sql.SQLException: 内部错误: Unable to construct a Datum from the specified input

DBA应当了解的MySQL客户端程序启动选项

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

猜你喜欢

Mysql5写中文乱码问题解决

使用sp_xml_preparedocument处理XML文档的方法

CSS模块化设计

html中的sub与sup标签

ASP调用数据库常见错误的解决

两段不错的JS文字特效

页面编码的doctype声明

IE6下的CSS BUG枚举

Frontpage中网页字体的美化研究

ASP链接Mysql数据库 非DSN连接的方法

浅析SQL Server 2008企业级新特性

注册表单的规则——读《Patterns for Sign Up &Ramp Up》

Dreamweaver MX技巧之超链接

如何使用XML实现多渠道接入网站的构架

傲游对开发人员的影响越来越大了

Oracle 创建监控账户 提高工作效率

浅析ASP内置组件

Oracle 触发器的使用小结

java.sql.SQLException: 内部错误: Unable to construct a Datum from the specified input

DBA应当了解的MySQL客户端程序启动选项

ASP链接Mysql数据库非DSN连接的方法

Oracle 创建监控账户提高工作效率