当我按下 div 1 中的按钮时，我得到了带有 multid div 和按钮的 html，其中只有按钮，而更改类名处于活动状态或将其删除 1button 处于活动状态
您可以使用 JavaScript 实现此功能，方法是使用事件侦听器来切换相应容器内按钮上的
activedivactivedivHTML：
您有两个
div.buttons.buttons2<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="buttons">
<button class="test active">test1</button>
<button class="test">test2</button>
<button class="test">test3</button>
</div>
<div class="buttons2">
<button class="test active">test1</button>
<button class="test">test2</button>
<button class="test">test3</button>
</div>
<script src="script.js"></script>
</body>
</html>
CSS：
button {
padding: 10px;
margin: 5px;
background-color: lightgray;
}
button.active {
background-color: blue;
color: white;
}
JS 逻辑：
handleButtonClickdivactiveactive事件监听器：
JavaScript 将
click.buttons.buttons2// Function to handle button click event
function handleButtonClick(event) {
const buttonGroup = event.target.parentElement; // Get the parent div of the button
const buttons = buttonGroup.querySelectorAll('.test'); // Get all buttons in the div
// Remove 'active' class from all buttons
buttons.forEach(button => button.classList.remove('active'));
// Add 'active' class to the clicked button
event.target.classList.add('active');
}
// Attach event listener to each button
document.querySelectorAll('.buttons .test, .buttons2 .test').forEach(button => {
button.addEventListener('click', handleButtonClick);
});