js自定义select下拉菜单效果
分类:实例代码
分享一段代码实例,它实现了自定义select下拉菜单的功能。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> * { margin: 0; padding: 0; } #btn { text-decoration: none; color: gray; } #ul1 { list-style: none; border: 1px solid gray; width: 150px; border-radius: 5px; position: absolute; left: 35px; top: 5px; background-color: white; display: none; } #ul1 li { padding: 5px 0; padding-left: 15px; } #ul1 li:hover { background-color: red; } </style> <script type="text/javascript"> window.onload = function () { var btn = document.getElementById("btn"); var ul1 = document.getElementById("ul1"); var lis = ul1.getElementsByTagName('li'); btn.onclick = function () { ul1.style.display = "block"; } ul1.onmouseleave = function () { ul1.style.display = "none"; } var texts = ['默认版本', '网易6.0', '网易6.0简约版']; for (var index = 0; index < lis.length; index++) { lis[index].index = index; lis[index].onclick = function () { ul1.style.display = "none"; for (var j = 0; j < lis.length; j++) { lis[j].innerHTML = texts[j]; } btn.innerHTML = this.innerHTML; this.innerHTML = '√' + this.innerHTML; } } } </script> </head> <body> 版本:<a href="###" id="btn">默认版本</a> <ul id="ul1"> <li>√ 默认版本</li> <li>网易6.0</li> <li>网易6.0简约版</li> </ul> </body> </html>
上面的代码实现了我们的要求,更多内容可以参阅相关阅读。
相关阅读:
(1).getElementsByTagName()可以参阅document.getElementsByTagName()一章节。
(2).innerHTML属性可以参阅innerHTML一章节。
js自定义select下拉菜单效果,这样的场景在实际项目中还是用的比较多的,关于js自定义select下拉菜单效果就介绍到这了。
js自定义select下拉菜单效果属于前端实例代码,有关更多实例代码大家可以查看。