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

所属分类：网络编程 / JavaScript 阅读数： 1153

收藏 0赞 0分享

<!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>  </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>

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

更多精彩内容其他人还在看

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

JavaScript 无符号右移赋值操作

JavaScript 无符号右移运算符

JS幻想读取二进制文件第1/2页

javascript 层展开/关闭，带缓冲效果