仿淘宝首页分类列表效果实现代码

更新时间：2009年04月20日 15:51:20 作者：

模板淘宝首页的分类列表效果，17173的游戏分类效果也不错。

<!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>Untitled Document</title> <style type="text/css"> body{font-size:12px;position:relative;font-family:Verdana, Geneva, sans-serif;} a{color:blue;} ul{margin:0;padding:0;list-style:none;} #navigation{height:26px;} #navigation li{float:left;} #navigation li.show .content{display:block;} #navigation li a,#navigation li span{display:inline-block;border:solid 1px #fff;border-bottom:none;height:26px;padding:0 6px;line-height:20px;overflow:hidden} #navigation li a:hover,#navigation li.show a.index{background:#DBF3FE;border-color:#0a0;position:relative;top:0px;z-index:2;} #container{position:relative;width:800px;margin:50px;} #navigation li .content{position:absolute;left:0;top:26px;background:#DBF3FE;border:solid 1px #0a0;width:760px;padding:20px;display:none;} #navigation li .content ul li{margin-right:10px;float:none;display:inline;} #navigation li .content ul li a{border:none;} #navigation li .content ul li{width:120px;} #navigation li .content ul li h3{clear:both;text-align:left;} </style> </head> <body> <div id="container">     <ul id="navigation">         <li><span>拼音索引</span></li>         <li>             <a href="#" class="index">A</a>             <div class="content">                 <h3>阿里山</h3>                 <ul>                     <li><a href="#">阿里山</a></li>                     <li><a href="#">阿里山</a></li>                     <li><a href="#">阿里山</a></li>                     <li><a href="#">阿里山</a></li>                     <li><a href="#">阿里山</a></li>                     <li><a href="#">阿里山</a></li>                 </ul>                 <h3>阿里山</h3>                 <ul>                     <li><a href="#">阿里山</a></li>                     <li><a href="#">阿里山</a></li>                     <li><a href="#">阿里山</a></li>                     <li><a href="#">阿里山</a></li>                 </ul>             </div>         </li>         <li>             <a href="#" class="index">B</a>             <div class="content">                 <h3>棒棒糖</h3>                 <ul>                     <li><a href="#">棒棒糖</a></li>                     <li><a href="#">棒棒糖</a></li>                     <li><a href="#">棒棒糖</a></li>                     <li><a href="#">棒棒糖</a></li>                     <li><a href="#">棒棒糖</a></li>                     <li><a href="#">棒棒糖</a></li>                 </ul>                 <h3>棒棒糖</h3>                 <ul>                     <li><a href="#">棒棒糖</a></li>                     <li><a href="#">棒棒糖</a></li>                     <li><a href="#">棒棒糖</a></li>                     <li><a href="#">棒棒糖</a></li>                 </ul>             </div>         </li>         <li><a href="#" class="index">C</a><div class="content">C</div></li>         <li><a href="#" class="index">D</a><div class="content">D</div></li>         <li><a href="#" class="index">E</a><div class="content">E</div></li>         <li><a href="#" class="index">F</a><div class="content">F</div></li>         <li><a href="#" class="index">G</a><div class="content">G</div></li>         <li><a href="#" class="index">H</a><div class="content">H</div></li>         <li><a href="#" class="index">I</a><div class="content">I</div></li>         <li><a href="#" class="index">J</a><div class="content">J</div></li>         <li><a href="#" class="index">K</a><div class="content">K</div></li>         <li><a href="#" class="index">L</a><div class="content">L</div></li>         <li><a href="#" class="index">M</a><div class="content">M</div></li>         <li><a href="#" class="index">N</a><div class="content">N</div></li>         <li><a href="#" class="index">O</a><div class="content">O</div></li>         <li><a href="#" class="index">P</a><div class="content">P</div></li>         <li><a href="#" class="index">Q</a><div class="content">Q</div></li>         <li><a href="#" class="index">R</a><div class="content">R</div></li>         <li><a href="#" class="index">S[sh]</a><div class="content">S</div></li>         <li><a href="#" class="index">T</a><div class="content">T</div></li>         <li><a href="#" class="index">U</a><div class="content">U</div></li>         <li><a href="#" class="index">V</a><div class="content">V</div></li>         <li><a href="#" class="index">W</a><div class="content">W</div></li>         <li><a href="#" class="index">X</a><div class="content">X</div></li>         <li><a href="#" class="index">Y</a><div class="content">Y</div></li>         <li><a href="#" class="index">Z[zh]</a><div class="content">Z</div></li>     </ul> </div> </body> </html> <script type="text/javascript"> function showAjaxContent(){     var obj=document.getElementById("navigation");     var liObj=obj.getElementsByTagName("li");     var length=liObj.length;     var currentLiObj;     for(var i=0;i<length;i++){         currentLiObj=liObj[i];         if(currentLiObj.parentNode!=obj){continue;}         //然后循环添加事件         currentLiObj.onmouseover=function(){             if(this.className.indexOf("show")<0){                 this.className+=" show";             }             clearStyle(this);         }                 currentLiObj.onmouseout=function(){             this.className=this.className.replace("show","");             clearStyle(this);         }     }     function clearStyle(obj){         for(var i=0;i<length;i++){             currentLiObj=liObj[i];             if(obj!=currentLiObj){                 currentLiObj.className=currentLiObj.className.replace("show","");             }         }     } } showAjaxContent(); </script>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

javascript function调用时的参数检测常用办法
js中并不直接支持类似c#的方法重载，所以只能变相的来解决，示意代码：(利用了内置属性arguments)
2010-02-02
js取整数、取余数的方法
这篇文章主要介绍了js取整数、取余数的方法,需要的朋友可以参考下
2014-05-05
微信小程序开发指南之字体样式设置
在小程序开发中经常需要我们自定义字体样式,下面这篇文章主要给大家介绍了关于微信小程序开发指南之字体样式设置的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-03-03
JavaScript 弱引用强引用底层示例详解
这篇文章主要为大家介绍了JavaScript 弱引用强引用底层示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
JS实现为排序好的字符串找出重复行的方法
这篇文章主要介绍了JS实现为排序好的字符串找出重复行的方法,涉及JavaScript字符串运算相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2016-03-03
使用Fetch API时获取404错误的解决方案
在现代Web开发中,Fetch API 是用于执行网络请求的主要工具之一,它提供了一种基于Promise的简洁语法,使得异步操作更加直观和易于管理,本文将详细探讨在使用Fetch API时获取404错误的原因、如何检测和处理这些错误,以及最佳实践,需要的朋友可以参考下
2024-12-12
Javascript isArray 数组类型检测函数
在日常开发中，我们经常需要判断某个对象是否是数组类型的，在js中检测对象类型的常见的方法有几种.
2009-10-10
Javascript如何实现扩充基本类型
这篇文章主要介绍了Javascript如何实现扩充基本类型,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-08-08
javascript简单判断输入内容是否合法的方法
这篇文章主要介绍了javascript简单判断输入内容是否合法的方法,以验证用户名是否为数字与字母组成为例,分析了javascript正则验证的思路与实现方法,需要的朋友可以参考下
2016-05-05
javascript调试之DOM断点调试法使用技巧分享
在开发中，偶尔会遇到类似这样的问题：页面上的一个DOM元素被改了属性，但是我们却不知道是哪个脚本更改的
2014-04-04

仿淘宝首页分类列表效果实现代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具