用JavaScript函数实现类似下拉菜单的方法

逃离我推掉我的手 2023-07-18 06:42 111阅读 0赞

用JavaScript函数实现类似下拉菜单的方法  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjUxNTA1MA_size_16_color_FFFFFF_t_70]

<script>
        // 给li定义一个变量circle，给div定义一个变量chunk
      var circle, chunk;
    //   执行函数
      init();
    //   创建一个函数init
      function init() {
        //   用for循环获取1-5的数字
        for (i = 1; i < 6; i++) {
            // 分别获取li的id
          var li = document.getElementById("li" + i);
        //   创建一个点击事件 当点击时执行后面的函数
          li.onclick = function() {
            // this就是指当前被点击元素
            // 执行第三个函数给li获取对应的div
            var div = two(this);
            // 点击时的li和对应的div带入函数中获取对应的样式
            three(this, div);
          };
        }
      }
      function two(li) {
        // 如果点击的li.id时li1时就获取对应的div1
        if (li.id === "li1") return document.getElementById("div1");
        // 如果点击的li.id时li2时就获取对应的div2
        if (li.id === "li2") return document.getElementById("div2");
        // 如果点击的li.id时li3时就获取对应的div3
        if (li.id === "li3") return document.getElementById("div3");
        // 如果点击的li.id时li4时就获取对应的div4
        if (li.id === "li4") return document.getElementById("div4");
        // 如果点击的li.id时li5时就获取对应的div5
        if (li.id === "li5") return document.getElementById("div5");
      }
      // 设置一个函数 设置两个参数
      function three(li, div) {
        if (circle) {
            // 清除上次点击的样式
          circle.style.backgroundColor = "rgba(0,0,0,0)";
        }
        // 当点击时把li的值赋给circle
        circle = li;
        // 给circle设置样式
        circle.style.backgroundColor = "red";
        if (chunk) {
            // 将上次的样式隐藏
          chunk.style.display = "none";
        }
        // 把div的值赋给chunk
        chunk = div;
        // 给chunk设置样式
        chunk.style.display = "block";
      }
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjUxNTA1MA_size_16_color_FFFFFF_t_70]: /images/20230528/9318d8b3cde449d4b314d8aeeb02cc3f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，111人围观）

还没有评论，来说两句吧...

相关阅读

相关用JavaScript函数实现类似下拉菜单的方法

用JavaScript函数实现类似下拉菜单的方法 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_tex

逃离我推掉我的手/ 2023年07月18日 06:42/ 0 赞/ 112 阅读

相关 JavaScript（js）网页--下拉菜单制作

JavaScript（js）网页–下拉菜单制作在网页的设计中，经常会出现二级下拉菜单，当鼠标经过时，显示二级菜单，鼠标离开时隐藏。例如新浪网 ![在这里插入图片描述]

梦里梦外;/ 2022年12月22日 11:09/ 0 赞/ 219 阅读

相关 js实现下拉菜单

效果：平时在网页上经常会看到导航栏在鼠标经过时，字体颜色和背景会改变，然后会显示下拉菜单。原理：js实现在鼠标经过时，改变字体的颜色和背景，然后下拉菜单显示。一般情况下，

客官°小女子只卖身不卖艺/ 2022年08月23日 05:45/ 0 赞/ 223 阅读

相关 javascript的下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

谁借莪１个温暖的怀抱￠/ 2022年08月21日 08:56/ 0 赞/ 184 阅读

相关 HTML/CSS方法和JavaScript方法实现下拉菜单

最近在做一个简单的网页，模仿我们学校的官网页面。上次做的那个企业网站已经实现了这个网页的大部分模块，主要的技术难点是导航菜单的二级下拉菜单。我在慕课网上找到了一个课程，名字

以你之姓@/ 2022年07月15日 00:54/ 0 赞/ 234 阅读

相关下拉菜单

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html;

港控/mmm°/ 2022年06月18日 10:51/ 0 赞/ 341 阅读

相关下拉菜单测试用例

下拉菜单基本测试： 1)默认值(为空，提示选择，某一值)检查； 2)列表内容，是可变还是固定的，可变的最好要用SQL或其他方式验证正确性，不允许出现重复值； 3)列

刺骨的言语ヽ痛彻心扉/ 2022年05月16日 12:43/ 0 赞/ 267 阅读

相关利用JavaScript实现下拉菜单

实现效果：点击父级标题时下拉菜单会出现，同时其他已下拉的菜单会闭合。再次点击当前打开的父级菜单时，闭合。 ![watermark_type_ZmFuZ3poZW5naGVpd

Bertha 。/ 2022年04月22日 15:52/ 0 赞/ 257 阅读

相关 HTML/CSS方法实现下拉菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

川长思鸟来/ 2022年01月27日 00:29/ 0 赞/ 333 阅读

相关下拉菜单的实现

CSS实现下拉菜单： <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

落日映苍穹つ/ 2021年12月16日 08:53/ 0 赞/ 404 阅读