h5学习笔记（3）导航菜单

最新推荐文章于 2025-07-10 15:32:21 发布

hero82748274

最新推荐文章于 2025-07-10 15:32:21 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript和Egret相关

本文链接：https://blog.youkuaiyun.com/hero82748274/article/details/50437747

javascript和Egret相关专栏收录该内容

97 篇文章

订阅专栏

本文介绍如何使用原生JavaScript和CSS实现一个简单的菜单导航功能。通过获取DOM元素并为每个菜单项添加点击事件，实现了高亮当前选择的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

手写练习一下js，最近在别人的APP的时候看到菜单的时候，一直很困扰该如何弄css，该如何去写js，平时很少写这些所以现在要把这个bug 修复一下。使用jq确实是方便很多处理dom的方面，而使用angular 的时候对一些单页面应用确实有用。有时候想使用一些原始的一点东西，因为是练习的关系。比较喜欢原始一点东西。

这里写图片描述

当时给到我一个提示就是UL 无序列表，想想一下利用ul 和li 组合就可以配搭到一些导航菜单了。有一次我实在不知道如何去写这个交互，朋友给我上课一点点讲解我知道该如何去处理dom，我当时想到就是采用循环去监听每一个按钮的做法去完成这个简单的交互。
使用 getElementsByTagName 的方式去取，返回是一个数组的方式。于是就可以对li的元素进行处理监听行为了。

但是要注意到 var item = lists[i]这种情况，for 循环之后，var 的变量是变成最后一个元素的，这个有点区别as3，所以也是js里面个坑。
好了，休息去。晚上电脑灯光太亮了。

<html>
    <meta  charset="utf-8"/>
   <head>
     <title>菜单导航</title>
   </head>
   <style style="text/css">

       .ui-nav-menu
       {
           list-style: none;
           width: 100px;
           text-align: center;          
       }

       .ui-nav-menu li
       {
           line-height: 30px;
           margin-top: 5px;
           border: 2px;
           background-color: burlywood
       }


    </style>
    <body>
            <div id="menu">      
               <ul class="ui-nav-menu">
                  <li>家用电器</li>
                  <li>汽车用品</li>
                  <li>玩具乐器</li>
                  <li>营养保健</li>
                  <li>清洁用品</li>
                  <li>个护化妆</li>
                </ul>
          </div>
    </body>

    <script type="text/javascript">

        var lists = document.getElementsByTagName('li');

        //不选
        function unSelect()
        {
            for(var j=0;j<lists.length;j++)
            {        
                var  item = lists[j];
                item.style.color = '#000000';  
            }
        }

        //循环读取li 元素
        for(var i=0;i<lists.length;i++)
        {        
            var  item = lists[i];
            lists[0].style.color = '#ff0000';
            item.onclick = function ()
            {
                unSelect();
                this.style.color = '#ff0000';
                alert(this.innerHTML);
            }           
        }

    </script>


</html>