单击元素时切换 Class
[英]Toggle Class when element is clicked
问题描述
I'm trying to build a function where when a link is clicked (all have the same class), a class is toggled on another element.
我正在尝试构建一个 function，当单击一个链接（都具有相同的类）时，将在另一个元素上切换 class。
Example: if I click on link 1 red should get the class active.示例：如果我单击链接 1，红色应该激活 class。 If I click on link 2, pink should get the class active and not the others and so on.如果我点击链接 2，粉红色应该激活 class 而不是其他等等。 My javascript knowledge is limited and I managed to give the link an active class but not the respective elements that I want to focus.我的 javascript 知识有限，我设法给链接一个活跃的 class 但不是我想要关注的各个元素。
$(".trigger").click(function(){ $('.trigger').removeClass('checked') $(this).addClass('checked') })
.main{ position: relative; width: 500px; height: 500px; }.basic{ width: 300px; height: 300px; position: absolute; right: 0; }.red { background-color: red; }.pink { background-color: pink; }.blue{ background-color: blue; }.green { background-color: green; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="#" class="trigger">Link 1</a> <a href="#" class="trigger">Link 2</a> <a href="#" class="trigger">Link 3</a> <a href="#" class="trigger">Link 4</a> <div class="main"> <div class="red basic"></div> <div class="pink basic"></div> <div class="blue basic"></div> <div class="green basic"></div> </div>
3 个解决方案
解决方案1
2 已采纳 2022-11-15 12:32:46
The position: absolute on your basic class is stacking the children on top of each other so setting any of them to active will cause no visual change so I've removed that property so you can see each element. position: absolute在你的basic class 上将子元素堆叠在一起，因此将它们中的任何一个设置为active都不会导致视觉变化，所以我删除了该属性，以便你可以看到每个元素。 Obviously you can style your elements as you wish.显然，您可以根据需要设置元素的样式。
I've set up a custom attribute that lets your code know what element to apply the style (I've called it data-target-class ).我设置了一个自定义属性，让您的代码知道要应用样式的元素（我将其称为data-target-class ）。 I've use jQuery's attr method to get that value in to a variable.我使用 jQuery 的attr 方法将该值赋给一个变量。 I've then used jQuery's child selector to pick out all the children and remove the active class. I've used the same selector again to target the specific element you want and add the active class to that.然后我使用 jQuery 的子选择器挑选出所有子元素并删除活动的 class。我再次使用相同的选择器来定位您想要的特定元素并向其添加active的 class。
Finally I've created an active class that puts a box shadow around the element so you can see what's 'active'.最后，我创建了一个active的 class，它在元素周围放置了一个框阴影，这样您就可以看到什么是“活动的”。
Hope this explains everything.希望这能解释一切。 If not pop a comment in and I'll see how I can make it clearer for you.如果没有发表评论，我会看看如何让你更清楚。
$(".trigger").click(function() { $('.trigger').removeClass('checked'); $(this).addClass('checked'); const target = $(this).attr('data-target-class'); $(".main >.basic").removeClass('active'); $(".main >."+target).addClass('active'); })
.main { position: relative; width: 500px; height: 500px; margin-top:2rem; }.basic { width: 20px; height: 20px; /*position: absolute;*/ right: 0; margin:1rem; }.red { background-color: red; }.pink { background-color: pink; }.blue { background-color: blue; }.green { background-color: green; }.active { box-shadow: 0px 0px 16px 5px #00FF0F; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="#" class="trigger" data-target-class="red">Link 1</a> <a href="#" class="trigger" data-target-class="pink">Link 2</a> <a href="#" class="trigger" data-target-class="blue">Link 3</a> <a href="#" class="trigger" data-target-class="green">Link 4</a> <div class="main"> <div class="red basic"></div> <div class="pink basic"></div> <div class="blue basic"></div> <div class="green basic"></div> </div>
解决方案2
0 2022-11-15 12:54:23
<html>
<head>
<style>
.main {
position: relative;
width: 500px;
height: 500px;
}
.basic {
width: 300px;
height: 300px;
position: absolute;
right: 0;
}
.red {
background-color: red;
}
.pink {
background-color: pink;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".trigger").click(function () {
$('.trigger').removeClass('checked')
$(this).addClass('checked')
let txt = $(this).text().trim();
$(".basic").css("z-index", "0")
if (txt == "Link 1") {
$(".red").eq(0).css("z-index", "10");
}
else if (txt == "Link 2") {
$(".pink").eq(0).css("z-index", "10");
}
else if (txt == "Link 3") {
$(".blue").eq(0).css("z-index", "10");
}
else if (txt == "Link 4") {
$(".green").eq(0).css("z-index", "10");
}
})
});
</script>
</head>
<body>
<a href="#" class="trigger">Link 1</a>
<a href="#" class="trigger">Link 2</a>
<a href="#" class="trigger">Link 3</a>
<a href="#" class="trigger">Link 4</a>
<div class="main">
<div class="red basic"></div>
<div class="pink basic"></div>
<div class="blue basic"></div>
<div class="green basic"></div>
</div>
</body>
</html>
解决方案3
-2 2022-11-15 12:26:39
try below,试试下面，
$(document).ready(function(){ $(".trigger1").click(function(){ $('.basic:eq(0)').toggle(); }); $(".trigger2").click(function(){ $('.basic:eq(1)').toggle(); }); $(".trigger3").click(function(){ $('.basic:eq(2)').toggle(); }); $(".trigger4").click(function(){ $('.basic:eq(3)').toggle(); }); }) .main{ position: relative; width: 500px; height: 500px; }.basic{ width: 300px; height: 300px; right: 0; }.red { background-color: red; }.pink { background-color: pink; }.blue{ background-color: blue; }.green { background-color: green; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="#" class="trigger1">Link 1</a> <a href="#" class="trigger2">Link 2</a> <a href="#" class="trigger3">Link 3</a> <a href="#" class="trigger4">Link 4</a> <div class="main"> <div class="red basic"></div> <div class="pink basic"></div> <div class="blue basic"></div> <div class="green basic"></div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.