仿淘宝网站的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 οnlοad="init()"> <div id="container"> <div id="title"> <ul> <li id="tag1"><a href="#1" οnclick="switchTag('tag1','content1');this.blur();" class="selectli1"><span class="selectspan1">首页</span></a></li> <li id="tag2"><a href="#2" οnclick="switchTag('tag2','content2');this.blur();"><span>下载中心</span></a></li> <li id="tag3"><a href="#3" οnclick="switchTag('tag3','content3');this.blur();"><span>产品介绍</span></a></li> <li id="tag4"><a href="#4" οnclick="switchTag('tag4','content4');this.blur();"><span>会员注册与登录</span></a></li> <li id="tag5"><a href="#5" οnclick="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 全选提示:你可先修改部分代码,再点运行代码]

转载于:https://www.cnblogs.com/Dicky/archive/2006/05/16/401666.html

仿淘宝网站的TabPage导航效果相关推荐

Bootstrap网格系统工作原理、网格系统前缀、利用网格系统实现导航栏效果、栅格系统中的列嵌套、栅格系统中的列偏移、栅格系统中的自动布局列、栅格系统中的重排序、模仿淘宝网站商品展示的页面效果
Bootstrap 网格系统 1.Bootstrap网格系统工作原理 Bootstrap的网格系统是指将页面布局划分为等宽的列.随着屏幕或视口尺寸的增加,系统会自动分为1~12列. 网格系统用于通过一 ...
JS仿淘宝网顶部的导航菜单
代码简介: JS仿淘宝网顶部的导航菜单.整合了购物车,收藏夹,搜索,搜索,网站导航等功能的导航. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
安卓项目实践——仿淘宝界面(二)——底部导航栏技术（Fragment实现）
安卓项目实践--仿淘宝界面(一)--底部导航栏技术(Fragment实现) 1.实现效果展示 2.技术简述该导航栏主要使用Fragment技术实现,关于Fragment的介绍大家可以自行百度,导航栏 ...
PHP仿淘宝网站程序设计
PHP仿淘宝网站程序设计在学习了PHP相关知识后利用其完成了一个仿淘宝网站界面,以下是相应的屏幕截图 (详细代码请联系我QQ:2186527424) 首先,进入登陆界面,在没有账户的情况下,点击右下 ...
仿淘宝详情页轮播图效果实现
仿淘宝详情页轮播图效果实现图片路径记得修改.js源文件记得导入! <!doctype html> <head> <meta charset="UTF-8 ...
仿淘宝Android实现底部导航栏图标溢出效果-clipChildren属性
1.clipChildren和clipPadding说明 clipChildren用来定义他的子控件是否要在他应有的边界内进行绘制. 默认情况下,clipChild被设置为true. 也就是不允许进行 ...
原生JS写仿淘宝搜索框（代码+效果），可实现3级搜索哦！
闲来无事,用原生JS写了一个淘宝搜索框,用的淘宝的接口,可直接进行商品搜索. 写在前面: 1.记得引用jquery啊! 2.有人私信我说css样式不能用,那是因为复制代码的时候,有空格,只需要自己把c ...
jQuery 仿淘宝鼠标悬停显示大图效果
页面只需要包含 jquery库, bigpic.js 和 bigpic.css即可自动给页面上符合条件的图片加上悬停效果. <script type="text/javascript& ...
vue-element-admin 简单实现仿淘宝实现商品图片放大镜效果
1.HTML <template><div v-loading="Loading" class="goodsUpload"><!- ...

仿淘宝网站的TabPage导航效果

仿淘宝网站的TabPage导航效果相关推荐

最新文章

热门文章