js監聽指定ul中li變化

實現效果:點擊後選中監聽變換

高亮顯示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);

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章