资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
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>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="#" _ewebeditor_ta_href="%23" class="index">A</a> <div class="content"> <h3>阿里山</h3> <ul> <li><a href="#" _ewebeditor_ta_href="%23">阿里山</a></li> <li><a href="#" _ewebeditor_ta_href="%23">阿里山</a></li> <li><a href="#" _ewebeditor_ta_href="%23">阿里山</a></li> <li><a href="#" _ewebeditor_ta_href="%23">阿里山</a></li> <li><a href="#" _ewebeditor_ta_href="%23">阿里山</a></li> <li><a href="#" _ewebeditor_ta_href="%23">阿里山</a></li> </ul> <h3>阿里山</h3> <ul> <li><a href="#" _ewebeditor_ta_href="%23">阿里山</a></li> <li><a href="#" _ewebeditor_ta_href="%23">阿里山</a></li> <li><a href="#" _ewebeditor_ta_href="%23">阿里山</a></li> <li><a href="#" _ewebeditor_ta_href="%23">阿里山</a></li> </ul> </div> </li> <li> <a href="#" _ewebeditor_ta_href="%23" class="index">B</a> <div class="content"> <h3>棒棒糖</h3> <ul> <li><a href="#" _ewebeditor_ta_href="%23">棒棒糖</a></li> <li><a href="#" _ewebeditor_ta_href="%23">棒棒糖</a></li> <li><a href="#" _ewebeditor_ta_href="%23">棒棒糖</a></li> <li><a href="#" _ewebeditor_ta_href="%23">棒棒糖</a></li> <li><a href="#" _ewebeditor_ta_href="%23">棒棒糖</a></li> <li><a href="#" _ewebeditor_ta_href="%23">棒棒糖</a></li> </ul> <h3>棒棒糖</h3> <ul> <li><a href="#" _ewebeditor_ta_href="%23">棒棒糖</a></li> <li><a href="#" _ewebeditor_ta_href="%23">棒棒糖</a></li> <li><a href="#" _ewebeditor_ta_href="%23">棒棒糖</a></li> <li><a href="#" _ewebeditor_ta_href="%23">棒棒糖</a></li> </ul> </div> </li> <li><a href="#" _ewebeditor_ta_href="%23" class="index">C</a><div class="content">C</div></li> <li><a href="#" _ewebeditor_ta_href="%23" class="index">D</a><div class="content">D</div></li> <li><a href="#" _ewebeditor_ta_href="%23" class="index">E</a><div class="content">E</div></li> <li><a href="#" _ewebeditor_ta_href="%23" class="index">F</a><div class="content">F</div></li> <li><a href="#" _ewebeditor_ta_href="%23" class="index">G</a><div class="content">G</div></li> <li><a href="#" _ewebeditor_ta_href="%23" class="index">H</a><div class="content">H</div></li> <li><a href="#" _ewebeditor_ta_href="%23" class="index">I</a><div class="content">I</div></li> <li><a href="#" _ewebeditor_ta_href="%23" class="index">J</a><div class="content">J</div></li> <li><a href="#" _ewebeditor_ta_href="%23" class="index">K</a><div class="content">K</div></li> <li><a href="#" _ewebeditor_ta_href="%23" class="index">L</a><div class="content">L</div></li> <li><a href="#" _ewebeditor_ta_href="%23" class="index">M</a><div class="content">M</div></li> <li><a href="#" _ewebeditor_ta_href="%23" class="index">N</a><div class="content">N</div></li> <li><a href="#" _ewebeditor_ta_href="%23" class="index">O</a><div class="content">O</div></li> <li><a href="#" _ewebeditor_ta_href="%23" class="index">P</a><div class="content">P</div></li> <li><a href="#" _ewebeditor_ta_href="%23" class="index">Q</a><div class="content">Q</div></li> <li><a href="#" _ewebeditor_ta_href="%23" class="index">R</a><div class="content">R</div></li> <li><a href="#" _ewebeditor_ta_href="%23" class="index">S[sh]</a><div class="content">S</div></li> <li><a href="#" _ewebeditor_ta_href="%23" class="index">T</a><div class="content">T</div></li> <li><a href="#" _ewebeditor_ta_href="%23" class="index">U</a><div class="content">U</div></li> <li><a href="#" _ewebeditor_ta_href="%23" class="index">V</a><div class="content">V</div></li> <li><a href="#" _ewebeditor_ta_href="%23" class="index">W</a><div class="content">W</div></li> <li><a href="#" _ewebeditor_ta_href="%23" class="index">X</a><div class="content">X</div></li> <li><a href="#" _ewebeditor_ta_href="%23" class="index">Y</a><div class="content">Y</div></li> <li><a href="#" _ewebeditor_ta_href="%23" class="index">Z[zh]</a><div class="content">Z</div></li> </ul> </div> </body> </html> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20showAjaxContent()%7B%20%0D%0A%20%20%20%20var%20obj%3Ddocument.getElementById(%22navigation%22)%3B%20%0D%0A%20%20%20%20var%20liObj%3Dobj.getElementsByTagName(%22li%22)%3B%20%0D%0A%20%20%20%20var%20length%3DliObj.length%3B%20%0D%0A%20%20%20%20var%20currentLiObj%3B%20%0D%0A%20%20%20%20for(var%20i%3D0%3Bi%3Clength%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20currentLiObj%3DliObj%5Bi%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20if(currentLiObj.parentNode!%3Dobj)%7Bcontinue%3B%7D%20%0D%0A%20%20%20%20%20%20%20%20%2F%2F%E7%84%B6%E5%90%8E%E5%BE%AA%E7%8E%AF%E6%B7%BB%E5%8A%A0%E4%BA%8B%E4%BB%B6%20%0D%0A%20%20%20%20%20%20%20%20currentLiObj.onmouseover%3Dfunction()%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(this.className.indexOf(%22show%22)%3C0)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.className%2B%3D%22%20show%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20clearStyle(this)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20currentLiObj.onmouseout%3Dfunction()%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20this.className%3Dthis.className.replace(%22show%22%2C%22%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20clearStyle(this)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20function%20clearStyle(obj)%7B%20%0D%0A%20%20%20%20%20%20%20%20for(var%20i%3D0%3Bi%3Clength%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20currentLiObj%3DliObj%5Bi%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(obj!%3DcurrentLiObj)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20currentLiObj.className%3DcurrentLiObj.className.replace(%22show%22%2C%22%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0AshowAjaxContent()%3B%20%0D%0A%3C%2Fscript%3E">
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程