Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Home> Web Front-end> JS Tutorial> body text

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

WBOY

Release： 2016-05-16 18:54:06

Original

1393 people have browsed it

<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> <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> <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需刷新才能执行]

Related labels：

淘宝首页分类列表

source：php.cn

Previous article：jquery 实现的全选和反选_jquery Next article：javascript 09年最新版的省市联动_表单特效

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Latest Articles by Author

'Sixteen Tones of Yanyun' What to do in a place where there is no peace and no peace?

2024-08-31 01:56:38
100,000 people in the streets: Mass protests escalate against Europe\'s largest lithium mine

2024-08-31 01:54:33
'Black Myth Wukong' automatic refresh method sharing

2024-08-31 00:57:39
Day f #daysofMiva Coding Challenge: Values and Variables in JS

2024-08-31 00:30:02
Fullstack Development: Learning Python as JavaScript Developers

2024-08-31 00:22:33
Dogecoin (DOGE) Price Prediction: Coin Risks Falling to August 5 Low

2024-08-31 00:19:41
RCO Finance (RCOF) Picked by Shiba Inu Whales to Surge by 1000x in the Next Bull Market

2024-08-31 00:16:42
3 Promising Solana Altcoins With High Growth Potential To Invest In 2023

2024-08-31 00:14:41
TeraWulf Inc. (NASDAQ:WULF): Where It Stands Against Other Bitcoin and Blockchain Stocks

2024-08-31 00:11:41
Raboo ($RABT): A New AI Meme Coin That Is Putting a Smile on Its Investors' Faces

2024-08-31 00:09:41

Latest Issues

Best way to preload route data before accessing the route. Before rendering the page for a given route, I want to first get the necessary data synchr...

From 2023-11-17 14:54:42

0

2

379

Call to undefined function create_function() I get this message on the home page of the website: Fatal error: Uncaught error: calling /...

From 2023-11-16 19:00:36

0

1

277

How to create a button in HTML with the same properties as the last row of the table? Consider I have a table in HTML: Home Service Contacts Now I just want to add a button at ...

From 2023-09-16 22:19:11

0

1

343

CDN serves images on some pages but not others I'm running into some issues while trying to resolve an issue on my site. The CDN (Content...

From 2023-09-15 18:29:13

0

1

662

Problem Solved: WooCommerce shopping cart and checkout functionality not working properly theme development issue I'm currently developing a WooCommerce compatible theme, I've started creating and customi...

From 2023-09-14 09:53:49

0

1

221

Related Topics

More>

Popular Recommendations

Popular Tutorials

More>

Related Tutorials

Popular Recommendations

Latest courses

Latest Downloads

More>

Web Effects

Website Source Code

Website Materials

Front End Template

About us Disclaimer Sitemap: php.cn：Public welfare online PHP training，Help PHP learners grow quickly！