菜单栏—获取子元素，子节点

最新推荐文章于 2023-03-27 18:11:25 发布

nnlss

最新推荐文章于 2023-03-27 18:11:25 发布

阅读量426

点赞数

本文链接：https://blog.csdn.net/qq_38233172/article/details/89736778

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #menu ul li {
            list-style-type: none;
            width: 80px;
            height: 30px;
            line-height: 30px;
            background-color:beige;
            text-align: center;
            float: left;
            margin-left: 5px;
        }

        #menu ul li.current {
            background-color: burlywood;
        }

        #menu ul li a {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div id="menu">
        <ul>
            <li class="current"><a href="javascript:void(0)">首页</a></li>
            <li><a href="javascript:undefined">播客</a></li>
            <li><a href="javascript:void(0)">博客</a></li>
            <li><a href="javascript:void(0)">相册</a></li>
            <li><a href="javascript:void(0)">关于</a></li>
            <li><a href="javascript:void(0)">帮助</a></li>
        </ul>
    </div>

    <script src="common.js"></script>
    <script>
      // void 是运算符   
      // 执行void后面的表达式，并始终返回undefined
      //void(0)  不去跳转
      var menu = my$('menu');
      // 获取menu中的ul
      var ul = getFirstElementChild(menu);

      for (var i = 0; i < ul.children.length; i++) {
        var li = ul.children[i];
        // 获取li中的a标签
        var link = getFirstElementChild(li);
        // 注意：此时是把函数赋给onclick 而不是函数的调用
        link.onclick = linkClick;
      }

      function linkClick() {
         // 所有的li取消高亮显示 
         for (var i = 0; i < ul.children.length; i++) {
           var li = ul.children[i];
           li.className = '';
         }

        // 让当前a标签所在的li高亮显示
        // this是当前点击的a标签对应的元素
        //高亮显示
        this.parentNode.className = 'current';

        // 取消后续内容的执行
        return false;
      }

      // ele.firstChild  
      // ele.firstElementChild

    </script>
</body>
</html>

common.js

function my$(id) {
  return document.getElementById(id);
}

// 处理浏览器兼容性
// 获取第一个子元素
function getFirstElementChild(element) {
    var node, nodes = element.childNodes, i = 0;
    while (node = nodes[i++]) {
        if (node.nodeType === 1) {
            return node;
        }
    }
    return null;
}

后期可以利用jQuery库处理浏览器兼容性问题

nnlss

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
菜单栏—获取子元素，子节点

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #menu ul li { list-style-type: non...
复制链接

扫一扫