gpt4 book ai didi

javascript - 单击另一个时如何从div中删除颜色

转载 作者:太空宇宙 更新时间:2023-11-04 11:26:00 26 4
gpt4 key购买 nike

所以我有这 3 个蓝色圆圈,用于特定的导航目的,单击时应保持红色。当您单击另一个圆圈时,最初的红色圆圈应该再次变为蓝色,然后单击的圆圈也会变为红色。

<html>
<head>
<style type='text/css'>

a.link {width: 15px;height: 15px;background-color:blue;border-radius: 50px;position:absolute;}
a.link:hover {background-color: red}
a.link.active {background-color: red;}

.position1 {position: absolute;top: 100px;left: 50%;margin-left: -11.5px;}
.position2 {position: absolute;top: 200px;left: 50%;margin-left: -11.5px;}
.position3 {position: absolute;top: 300px;left: 50%;margin-left: -11.5px;}

</style>
</head>

<body>
<script type='text/javascript'>
$(function() {
$('a.link').click(function() {
$('a.link').removeClass('active');
$(this).addClass('active');
})
});
</script>

<div class="position1"><a class="link" href="#"></a></div>
<div class="position2"><a class="link" href="#"></a></div>
<div class="position3"><a class="link" href="#"></a></div>
</body>
</html>

我过去做过这个,同样的脚本,同样的工作方式但是这是通过使用文本而不是自定义 div 形状。

我还想使用代码使第二个圆圈从一开始就亮起红色.eq(1).addClass('active');

这是一个 fiddle :https://jsfiddle.net/src6zf67/

最佳答案

https://jsfiddle.net/src6zf67/4/

它一直在工作,但你应该加载 jquery

HTML:

  <div class="position1"><a class="link" href="#"></a></div>
<div class="position2"><a class="link" href="#"></a></div>
<div class="position3"><a class="link" href="#"></a></div>

js:

        $(function() {
$('a.link').click(function() {
$('a.link').removeClass('active');
$(this).addClass('active');
})
});

样式:

a.link {width: 15px;height: 15px;background-color:blue;border-radius: 50px;position:absolute;}
a.link:hover {background-color: red}
a.link.active {background-color: red;}

.position1 {position: absolute;top: 100px;left: 50%;margin-left: -11.5px;}
.position2 {position: absolute;top: 200px;left: 50%;margin-left: -11.5px;}
.position3 {position: absolute;top: 300px;left: 50%;margin-left: -11.5px;}

关于javascript - 单击另一个时如何从div中删除颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32383680/

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