js监听指定ul中li变化

最新推荐文章于 2024-07-24 20:18:42 发布

z_victoria123

最新推荐文章于 2024-07-24 20:18:42 发布

阅读量5.9k

点赞数 2

分类专栏： javascript

本文链接：https://blog.csdn.net/z_victoria123/article/details/88723730

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实现效果：点击后选中监听变换

高亮显示css

.active{
    color: #ffffff;
    background: #c81623;
}

html部分

<div class="con_left">
        <ul class="con_left_ul" id="con_left_ul">
            <li id="zhengce">国内政策</li>
            <li id="tongzhi" >通知公告</li>
            <li id="zhanshi">京南园区展示</li>
        </ul>
    </div>

js监听

   var list = document.getElementById('con_left_ul');
        list.addEventListener('click', function (event) {
            event = event || window.event;
            var target = event.target || event.srcElement;
            switch (target.id) {
                case "tongzhi" :
                    $("#tongzhi").addClass("active").siblings().removeClass("active")
                    break;
                case "zhengce" :
                    $("#zhengce").addClass("active").siblings().removeClass("active")
                    break;
                case "zhanshi" :
                    $("#zhanshi").addClass("active").siblings().removeClass("active")
                    break;
            }
        }, false);