用js写的下拉菜单实例代码
程序员文章站
2022-05-17 21:44:43
...
<!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>无标题文档</title><style type="text/css">*{ margin:0px auto; padding:0px }#xianshi{width:130px;height:30px;border:1px solid #666;margin-left:400px;text-align:center;vertical-align:middle;line-height:30px;position:relative;z-index:999;}#xianshi:hover{cursor:pointer}.xiang{ width:130px;height:30px;border:1px solid #666;text-align:center;margin-left:400px;line-height:30px;vertical-align:middle;z-index:998;position:relative;}.xiang:hover{cursor:pointer;background-color:#93F}</style></head><body><div style="width:100%; height:30px; background-color:#F00;margin-top:50px;"></div><div style="width:100%; height:30px;"><div id="xianshi" onclick="xian()">111111111</div><div class="xiang" style=" display:none" onclick="huan(this)">111111111</div><div class="xiang" style=" display:none" onclick="huan(this)">222222222</div><div class="xiang" style=" display:none" onclick="huan(this)">333333333</div><div class="xiang" style=" display:none" onclick="huan(this)">444444444</div><div class="xiang" style=" display:none" onclick="huan(this)">555555555</div><div class="xiang" style=" display:none" onclick="huan(this)">666666666</div><div class="xiang" style=" display:none" onclick="huan(this)">777777777</div></div><div style="width:100%; height:30px; background-color:#F00; z-index:-10; position:relative;"></div></body><script type="text/javascript">function xian() { var s = document.getElementsByClassName("xiang") var a = document.getElementById("xianshi") var nr = a.innerHTML for(i=0;i<s.length;i++) { if(s[i].style.display == "none") { s[i].style.display = "block" if(s[i].innerHTML == nr) { s[i].style.display = "none" } } else { s[i].style.display = "none" } } }function huan(a) { var nr = a.innerHTML document.getElementById("xianshi").innerHTML = nr var s = document.getElementsByClassName("xiang") for(i=0;i<s.length;i++) { s[i].style.display = "none" } }</script></html>
效果如下:
<!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>无标题文档</title><style type="text/css">*{ margin:0px auto; padding:0px }#xianshi{width:130px;height:30px;border:1px solid #666;margin-left:400px;text-align:center;vertical-align:middle;line-height:30px;position:relative;z-index:999;}#xianshi:hover{cursor:pointer}.xiang{ width:130px;height:30px;border:1px solid #666;text-align:center;margin-left:400px;line-height:30px;vertical-align:middle;z-index:998;position:relative;}.xiang:hover{cursor:pointer;background-color:#93F}</style></head><body><div style="width:100%; height:30px; background-color:#F00;margin-top:50px;"></div><div style="width:100%; height:30px;"><div id="xianshi" onclick="xian()"><img src="1.jpg" height="30px" width="130px" /></div><div class="xiang" style=" display:none">222222222</div><div class="xiang" style=" display:none">333333333</div><div class="xiang" style=" display:none">444444444</div><div class="xiang" style=" display:none">555555555</div><div class="xiang" style=" display:none">666666666</div><div class="xiang" style=" display:none">777777777</div></div><div style="width:100%; height:30px; background-color:#F00; z-index:-10; position:relative;"></div></body><script type="text/javascript">function xian() { var s = document.getElementsByClassName("xiang"); var a = document.getElementById("xianshi"); var nr = a.innerHTML; for(i=0;i<s.length;i++) { if(s[i].style.display == "none") { s[i].style.display = "block"; document.getElementById("xianshi").innerHTML = '<img src="3.jpg" height="30px" width="130px" />'; } else { s[i].style.display = "none"; document.getElementById("xianshi").innerHTML = '<img src="1.jpg" height="30px" width="130px" />'; } } }</script></html>
以上就是用js写的下拉菜单实例代码的详细内容,更多请关注其它相关文章!
推荐阅读
-
为什么小弟我写的js代码没有起作用
-
JS打印彩色菱形的实例代码
-
memcache 用PHP写的基于Memcache的Queue实现代码
-
经典_用js快速实现鼠标和键盘选择下拉菜单(代码详解)
-
vue js秒转天数小时分钟秒的实例代码
-
js 实现倒计时效果的实例代码分享
-
iOS使用自带的UIViewController实现qq加号下拉菜单的功能(实例代码)
-
经典_用js快速实现鼠标和键盘选择下拉菜单(代码详解)
-
Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)
-
Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)