html + css + js 实现一排按钮，点击切换按钮样式

好的，这里是一个使用 HTML、CSS 和 JavaScript 来实现一排按钮点击切换样式的示例：

HTML代码：

<div class="buttons">
  <button class="active" onclick="activateButton(0)">Button 1</button>
  <button onclick="activateButton(1)">Button 2</button>
  <button onclick="activateButton(2)">Button 3</button>
</div>

CSS代码：

.buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  margin: 0 10px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  background-color: #ccc;
  color: #fff;
  cursor: pointer;
}

button.active {
  background-color: #f00;
}

JavaScript代码：

function activateButton(index) {
  // 获取所有按钮
  var buttons = document.querySelectorAll('.buttons button');
  
  // 移除所有按钮的 active 类
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].classList.remove('active');
  }
  
  // 给指定的按钮添加 active 类
  buttons[index].classList.add('active');
}

在这段代码中，我们给每个按钮添加了一个 onclick 属性，当按钮被点击时，会调用 activateButton 函数，并传入这个按钮的索引作为参数。这个函数会使用 document.querySelectorAll 方法获取所有的按钮，并循环遍历每个按钮，将它们的 active 类都移除。然后，根据传入的索引给指定的按钮添加 active 类，从而实现样式的切换。