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

时间 2019-12-14 标签 h5 学习笔记导航菜单

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

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

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

<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>

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

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