我正在嘗試構建一個函式，當單擊一個鏈接時（都具有相同的類），一個類在另一個元素上切換。
示例：如果我單擊鏈接 1，紅色應該會激活該類。如果我點擊鏈接 2，粉紅色應該讓班級活躍起來，而不是其他班級等等。我的 javascript 知識有限，我設法為鏈接提供了一個活動類，但沒有提供我想要關注的各個元素。
$(".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>uj5u.com熱心網友回復：
在position: absolute你的basic班級上，孩子們堆疊在一起，所以將他們中的任何一個設定為active不會導致視覺上的變化，所以我洗掉了那個屬性，這樣你就可以看到每個元素了。顯然，您可以根據需要設定元素的樣式。
我已經設定了一個自定義屬性，讓您的代碼知道要應用樣式的元素（我稱之為data-target-class）。我使用 jQuery 的attr 方法將該值賦給一個變數。然后我使用 jQuery 的子選擇器挑選出所有的孩子并洗掉活動類。我再次使用相同的選擇器來定位您想要的特定元素并向其添加active類。
最后，我創建了一個active類，它在元素周圍放置了一個框陰影，這樣您就可以看到什么是“活動的”。
希望這能解釋一切。如果沒有發表評論，我會看看如何讓你更清楚。
$(".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>uj5u.com熱心網友回復：
<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>
uj5u.com熱心網友回復：
試試下面，
$(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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/533633.html
上一篇：滾動到元素下方時檢測