本篇文章给大家分享的是有关使用JavaScript怎么编写一个下拉列表功能,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
目前创新互联已为上千家的企业提供了网站建设、域名、网页空间、网站托管、服务器托管、企业网站设计、上犹网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。1、HTML部分的代码
第一
- a
- b
- c
第二
- 1
- 2
- 3
第二
- 4
- 5
- 6
第二
- 7
- 8
- 9
2、css部分的代码
.outer{ margin: 0 auto; width: 500px; height: 600px; border: 1px solid red; } .outer .inner{ width: 500px; border: 1px solid red; } .outer .inner ul{ list-style: none; border: 1px solid fuchsia; } h3{ border: 1px solid blueviolet; height: 30px; display: flex; justify-content: center; cursor: pointer; background-color: #74a400; margin: 0; } ul{ display: none; } 这里.ul是HTML里面没有的,要通过js来添加 .ul{ display: block; background-color: cornflowerblue; margin: 0; } ul li{ border: 1px solid cornflowerblue; background-color: darkgray; display: flex; justify-content: center; margin-left: -42px; cursor: pointer; }
3、最重要的js代码部分
window.onload = function () { // 获取h3与ul var h3 = document.getElementsByTagName("h3"); var ul = document.getElementsByTagName("ul"); //对所有的h3绑定一个点击事件 for (let i = 0; i以上就是使用JavaScript怎么编写一个下拉列表功能,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
网站名称:使用JavaScript怎么编写一个下拉列表功能-创新互联
URL地址:http://njwzjz.com/article/csdhgj.html