js实现按钮组
实现按钮组的基本结构
使用HTML和CSS创建按钮组的基础结构。HTML部分定义按钮容器和按钮元素，CSS部分设置按钮组的样式和布局。
<div class="button-group">
<button class="button">按钮1</button>
<button class="button">按钮2</button>
<button class="button">按钮3</button>
</div>.button-group {
display: flex;
gap: 8px;
}
.button {
padding: 8px 16px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
}
.button:hover {
background-color: #e0e0e0;
}添加交互功能
使用JavaScript为按钮组添加点击事件处理程序，实现按钮的选中状态切换。
document.querySelectorAll('.button').forEach(button => {
button.addEventListener('click', () => {
button.classList.toggle('active');
});
});.button.active {
background-color: #007bff;
color: white;
}单选按钮组实现
修改JavaScript代码，确保每次只有一个按钮处于选中状态。
document.querySelectorAll('.button').forEach(button => {
button.addEventListener('click', () => {
document.querySelectorAll('.button').forEach(btn => {
btn.classList.remove('active');
});
button.classList.add('active');
});
});动态生成按钮组
通过JavaScript动态生成按钮组，适用于数据驱动的场景。
const buttonData = ['选项1', '选项2', '选项3'];
const buttonGroup = document.createElement('div');
buttonGroup.className = 'button-group';
buttonData.forEach(text => {
const button = document.createElement('button');
button.className = 'button';
button.textContent = text;
buttonGroup.appendChild(button);
});
document.body.appendChild(buttonGroup);按钮组事件委托
使用事件委托优化事件处理，减少事件监听器数量。
document.querySelector('.button-group').addEventListener('click', (event) => {
if (event.target.classList.contains('button')) {
document.querySelectorAll('.button').forEach(btn => {
btn.classList.remove('active');
});
event.target.classList.add('active');
}
});响应式按钮组
通过CSS媒体查询实现按钮组在不同屏幕尺寸下的响应式布局。
@media (max-width: 600px) {
.button-group {
flex-direction: column;
}
}
