我有一个this滑块，但我希望在当前类div(第三个)之后添加div背景色

Question

<div class="slider"></div>
<div class="slider current"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>

我有一个this滑块，但我希望在当前类div(第三个(之后添加div背景色。

Answer 1

不需要JavaScript。只需使用带有.slider.current + .slider的CSS来选择带有.current的div之后的div

示例：

.slider.current+.slider {
background: red;
}

<div class="slider">slider</div>
<div class="slider current">slider current</div>
<div class="slider">slider</div>
<div class="slider">slider</div>
<div class="slider">slider</div>
<div class="slider">slider</div>

Answer 2

因此，如果您只想为第三个div添加背景色，您可以添加一个简单的脚本来解决这个问题。这里有一个例子：

document.getElementsByClassName('slider')[2].style.background = "red";

Answer 3

您可以像这样使用nextSibling：

document.querySelector('.slider').nextSibling.style.backgroundColor = 'red';

Answer 4

这里有一种使用CSS、HTML和普通JavaScript来突出显示当前选择的div的方法。点击div即可选择。

还可以使用事件冒泡来实现解决方案。

function setCurrent(newCurrent) {
// select the currently active div
const current = document.querySelector(".slider.current");
// if it's the one that's already active, there is nothing to do
if (newCurrent == current) return
// we need to change the currently selected div
// remove "current" class and update text of current div
current.classList.remove("current");
current.textContent = "Slider";
// add "current" class and set text for now current div
newCurrent.classList.add("current")
newCurrent.textContent = "Current";
}
window.addEventListener("DOMContentLoaded", event => {
// add on click listener to all elements with the a class "slider"
document.querySelectorAll(".slider").forEach((slider) => {
slider.addEventListener("click", () => setCurrent(slider));
})
})

.slider {
background-color: black;
color: white;
}

/* more specific rule for elements with class slider and current*/
.slider.current {
background-color: blue;
}

<div class="slider">Slider</div>
<div class="slider current">Current</div>
<div class="slider">Slider</div>
<div class="slider">Slider</div>
<div class="slider">Slider</div>
<div class="slider">Slider</div>