更改 CSS onclick 函数 javascript - Change CSS onclick function javascript

我有一个代码，当我单击特定元素时，它的背景应该通过删除所有其他元素背景来改变。但是我在这里遇到的问题是，当我在ul li ul下单击li时，它也需要父li并提供背景。请在下面检查我的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul li ul li").click(function() {  
 //a = $(this).html();         // when clicking any of these links
 //alert(a);
$("*").removeClass("active"); // remove highlight from all links
$(this).addClass("active");          // add highlight to clicked link
})
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("ul li").click(function() {  
//a = $(this).html();         // when clicking any of these links
//alert(a);
$("*").removeClass("active"); // remove highlight from all links
$(this).addClass("active");          // add highlight to clicked link
})
});
</script>
<style>
.active { color:white; background:green; }
</style>
</head>
<body>
<ul>
<li>level1
        <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        </ul>
</li>
<li>level2</li>
<li>level3</li>
</ul>
</body>
</html>

问题是您的事件正在传播到父级，因此代码首先在子ul li的单击处理程序中执行，然后在父ul li的单击处理程序中再次执行。

在孩子的处理程序中添加对event.stopPropagation()的调用：

$(document).ready(function(){
    $("ul li").click(function(evt) {  
        $(".active").removeClass("active"); // remove highlight from all links
        $(this).addClass("active");          // add highlight to clicked link
        evt.stopPropagation();
    })
});

小提琴

或者，如果您需要事件传播到其他地方，但不在此代码中处理，您可以将event.target与this进行比较：

$(document).ready(function(){
    $("ul li").click(function(evt) {  
        if(evt.target !== this) return; //do not process on bubbled-up events
        $(".active").removeClass("active"); // remove highlight from all links
        $(this).addClass("active");          // add highlight to clicked link
    })
});

小提琴

以简单的方式尝试一下，

$(document).ready(function(){
    $("li").on('click',function() {  
        $(this).parent('ul').find('li').removeClass("active");// get all li from the parent ul
        $(this).addClass("active");// add highlight to clicked link
    });
});

如果要从所有li's中删除所有active classes，请尝试此操作，

$(document).ready(function(){
    $("li").on('click',function() {  
        $('li').removeClass("active");// remove active class from all li's
        $(this).addClass("active");// add highlight to clicked link
    });
});

它正在作为魅力工作

需要在代码的第 21 行进行更改。

用：

$("ul li ul li").click(function() {

而不是

$("ul li").click(function() {

试试你的脚本：

j查询 10 版本

$(document).ready(function(){
    $('ul li ul li').on('click', function() {
        $('ul li ul li').removeClass('active');
        $(this).addClass('active');
    });
});

哎呀，对不起，如果你使用较低版本的jQuery。

jquery 1.3 会很好

    $(document).ready(function(){
        $('ul li ul li').live('click', function() {
            $('ul li ul li').removeClass('active');
            $(this).addClass('active');
        });
    });

编辑

你想要这样的东西吗：

var Test = {
    init:function() {
        $('ul li').click(function() {
            $('li').removeClass('active');
            $(this).addClass('active');
            $(this).children().css({
                'background' : '#fff',
                'color' : '#000'
            });
        });
    }
}
$(document).ready(function(){
    Test.init();
});