事件委托方式改变当前点击要素样式，适合菜单功能

最新推荐文章于 2021-08-03 10:41:47 发布

杨大大28

最新推荐文章于 2021-08-03 10:41:47 发布

阅读量379

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/popstarqq/article/details/103618711

版权

事件委托方式改变当前点击要素样式，适合菜单功能

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>当前点击要素样式</title>

    <style type="text/css">
        body, #map {
            border: 0px;
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            font-size: 13px;
        }
        #testUl{
            list-style: none;
        }
        #testUl li{
            float: left;
            padding:10px;
            background:gray;
            margin:1px;
        }
        #testUl li:hover{
           cursor: pointer;
        }
        .currentShow{
            color:red;
            border-bottom:1px solid red;
            background: orange !important;
        }
        
    </style>

</head>
<body>
<div id="map">
    <ul id='testUl'>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
<script type="text/javascript">
     document.getElementById('testUl').addEventListener('click',function(e){
        var e=e||window.event
        let target=e.target;
        let nodeName=target.nodeName.toLowerCase();
        if(nodeName=='li'){
            target.classList.add('currentShow');
            let brotherNodes=siblings(target);
            brotherNodes.forEach(function(node){
               let isExist=node.classList['value'].indexOf('currentShow')>-1;
               if(isExist){
                node.classList.remove('currentShow');
               }
            })
        }
        function siblings(elm) {
            var a = [];
            var p = elm.parentNode.children;
            for ( var i =0,pl= p.length;i<pl;i++) {
                if (p[i] !== elm) a.push(p[i]);
            }
            return a;
        }
     },false)
</script>
</body>
</html>