gpt4 book ai didi

css - 如何通过单击表格列来更改 div 的颜色?

转载 作者:行者123 更新时间:2023-11-28 16:12:18 25 4
gpt4 key购买 nike

你好我正在尝试做这样的事情

当我单击第一个表格列“一”时,我需要将其 div 颜色 () 从绿色更改为红色。

当我再次点击它时,它应该变回蓝色。我怎样才能做到这一点?? 我尝试了以下代码但它不起作用

<html>
<head>
<script>

$(".stileone").on("click", function() {
$(this).css("background", "blue");
});

</script>
</head>
<body>
<style>

table{
width: 100%;
height: 50px;
}
table td{
width: 40px;
}
</style>
<table border="1">
<tr>
<td >
<div class="stileone" >
Div Content
</div>
</td>
<td></td>
<td></td>
</tr>

</table>
</body>
</html>

最佳答案

两种方式

  1. 在正文末尾加载脚本!

    <script>
    $(".stileone").on("click", function() {
    $(this).css("background", "blue");
    });
    </script>

  2. 或者,包装在 $(document).ready(function(){})

    <script>
    $(document).ready(function(){
    $(".stileone").on("click", function() {
    $(this).css("background", "blue");
    });
    });
    </script>

原因

当脚本执行时,没有匹配它的 DOM 对象。所以,这就是处理程序没有附加到元素的原因。


为了改变颜色,您可以这样做。

$(".stileone").on("click", function() {
if ($(this).css("background") == "blue")
$(this).css("background", "red");
else if ($(this).css("background") == "red")
$(this).css("background", "green");
else if ($(this).css("background") == "green")
$(this).css("background", "blue");
});

关于css - 如何通过单击表格列来更改 div 的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19963634/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com