仿淘宝网站的TabPage导航效果

zoukankan html css js c++ java

仿淘宝网站的TabPage导航效果

代码如下:
<!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=gb2312" /> <title>仿淘宝网站的导航效果</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; } } function init(){ t=document.location.hash.replace('#',''); if(t=='')t=1; switchTag('tag'+t,'content'+t); } </script> </head> <body onload="init()"> <div id="container"> <div id="title"> <ul> <li id="tag1"><a href="#1" onclick="switchTag('tag1','content1');this.blur();" class="selectli1"><span class="selectspan1">首页</span></a></li> <li id="tag2"><a href="#2" onclick="switchTag('tag2','content2');this.blur();"><span>下载中心</span></a></li> <li id="tag3"><a href="#3" onclick="switchTag('tag3','content3');this.blur();"><span>产品介绍</span></a></li> <li id="tag4"><a href="#4" onclick="switchTag('tag4','content4');this.blur();"><span>会员注册与登录</span></a></li> <li id="tag5"><a href="#5" 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="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" width="250" height="290" /></td> <td width="30%" align="center"><img src="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" width="15" height="290" /></td> </tr> </table> </div> </div> </div> </body> </html>
[Ctrl+A 全选提示:你可先修改部分代码,再点运行代码]

青苹果Web应用商店 https://webapp.taobao.com/

PHP/ASP.NET/ASP/UCHOME/DISCUZ! X系列网站开发，详细需求联系QQ:8511978

查看全文

相关阅读:
如何查看MySQL执行的每条SQL
最简单的方式在linux上升级node.js版本
 快速理解字符串和编码
 macaca常见错误排查
 macaca自动化初体验
 F2eTest程序快捷方式安装到桌面
 centos下mysqlreport安装和使用
 前端纯css 图片的模糊处理
 gulp入门学习教程（入门学习记录）
关于nodejs中npm命令没有反应的解决方法

原文地址：https://www.cnblogs.com/Dicky/p/401666.html