我在设置按钮样式时遇到问题。我需要的是，活动按钮和活动之前的所有按钮都有相同的颜色，活动按钮旁边的所有按钮有其他颜色。这可以在javascript中实现吗？
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
}
.active, .btn:hover {
background-color: #666;
color: white;
}
.mystyle{
background-color:gold;
}
</style>
</head>
<body>
<h1>Active Button</h1>
<p>Highlight the active/current (pressed) button.</p>
<div id="myDIV">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
</div>
<script>
// Add active class to the current button (highlight it)
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
if (current.length > 0) {
current[0].className = current[0].className.replace(" active", "");
}
this.className += " active";
this.previousSibling.className += " mystyle";
});
}
</script>
</body>
</html>
我希望它能帮助你。
function removeClasses() {
for(var i=1;i<=5;i++) {
$('#'+i+'').removeClass('active');
$('#'+i+'').removeClass('mystyle');
$('#'+i+'').removeClass('next');
}
}
function activeButton(id) {
id = parseInt(id);
removeClasses();
$('#'+id+'').addClass('active');
for(var j=1;j<=(id-1);j++) $('#'+j+'').addClass('mystyle');
for(var j=(id+1);j<=5;j++) $('#'+j+'').addClass('next');
}.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
}
.active, .btn:hover {
background-color: #666;
color: white;
}
.mystyle{
background-color:gold;
}
.next {
background-color:green;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Active Button</h1>
<p>Highlight the active/current (pressed) button.</p>
<div id="myDIV">
<button id="1" onclick="activeButton(this.id)" class="btn">1</button>
<button id="2" onclick="activeButton(this.id)" class="btn">2</button>
<button id="3" onclick="activeButton(this.id)" class="btn">3</button>
<button id="4" onclick="activeButton(this.id)" class="btn">4</button>
<button id="5" onclick="activeButton(this.id)" class="btn">5</button>
</div>
</body>
</html>它将为您的动态工作
let buttons = [...document.querySelectorAll('.demo')];
buttons.forEach(el => el.addEventListener('click', function (ev) {
buttons.map(el => {
el.classList.remove('active');
el.classList.remove('prev');
}
);
el.classList.add('active');
buttons = [...document.querySelectorAll('.demo')];
const activeButton = buttons.find(el => el.classList.contains('active'));
let previousSibling = activeButton.previousElementSibling;
while (previousSibling) {
previousSibling.classList.add('prev');
previousSibling = previousSibling.previousElementSibling;
}
}));.demo {
padding: 0.5rem 1rem;
margin: 0.125rem;
background: rgb(214, 230, 243);
display: inline-block;
cursor: pointer;
}
.demo.active {
background: rgb(205, 236, 226);
}
.demo.prev {
background: rgb(205, 236, 226);
}<div class="buttons">
<div class="demo">Button 1</div>
<div class="demo">Button 2</div>
<div class="demo">Button 3</div>
<div class="demo active">Button 4</div>
<div class="demo">Button 5</div>
<div class="demo">Button 6</div>
<div class="demo">Button 7</div>
<div class="demo">Button 8</div>
<div class="demo">Button 9</div>
</div>let buttons = [...document.querySelectorAll('.demo')];
buttons.forEach(el => el.addEventListener('click', function (ev) {
buttons.map(el => {
el.classList.remove('active');
el.classList.remove('prev');
}
);
el.classList.add('active');
buttons = [...document.querySelectorAll('.demo')];
const activeButton = buttons.find(el => el.classList.contains('active'));
// const activeButtonIndex = buttons.indexOf(activeButton);
let previousSibling = activeButton.previousElementSibling;
while (previousSibling) {
previousSibling.classList.add('prev');
previousSibling = previousSibling.previousElementSibling;
}
}));
.demo {
padding: 0.5rem 1rem;
margin: 0.125rem;
background: rgb(214, 230, 243);
display: inline-block;
cursor: pointer;
}
.demo.active {
background: rgb(205, 236, 226);
}
.demo.prev {
background: rgb(205, 236, 226);
}
<div class="buttons">
<div class="demo">Button 1</div>
<div class="demo">Button 2</div>
<div class="demo">Button 3</div>
<div class="demo active">Button 4</div>
<div class="demo">Button 5</div>
<div class="demo">Button 6</div>
<div class="demo">Button 7</div>
<div class="demo">Button 8</div>
<div class="demo">Button 9</div>
</div>