个人中心
gpt4 book ai didi

php - 更改 CSS onclick 函数 javascript

转载 作者：太空宇宙 更新时间：2023-11-04 04:23:55 24 4
gpt4 key购买 nike

我有一个代码，当我点击特定元素时，它的背景应该通过删除所有其他元素背景来改变。但是我遇到的问题是当我在 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.

在 child 的处理程序中添加对 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();
    })
});

Fiddle

或者，如果您需要将事件传播到其他地方，但不在此代码中处理，您可以将 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
    })
});

Fiddle

关于php - 更改 CSS onclick 函数 javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18652020/

24 4 0
文章推荐： c++ - IN6_SET_ADDR_UNSPECIFIED 未在此范围内声明
文章推荐： 从 Matlab 调用 Fortran 中的 C 兼容 DLL
文章推荐： sql-server - FreeTDS 中的@变量
文章推荐： javascript - 如何更改 Angular js 中事件链接的背景颜色
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com