按钮被点中了高亮显示，默认显示第一个按钮高亮怎么实现

要实现按钮被点击后高亮显示，并且默认显示第一个按钮高亮，可以使用CSS和JavaScript来完成。

首先，在HTML中为每个按钮添加一个相同的类名，例如 "button"，并为第一个按钮添加一个额外的类名，例如 "active"，用于表示高亮状态。

<button class="button active">按钮1</button>
<button class="button">按钮2</button>
<button class="button">按钮3</button>

接下来，使用CSS来定义按钮的样式，包括高亮状态的样式。

.button {
  /* 按钮的基本样式 */
}

.button.active {
  /* 高亮状态的样式 */
}

最后，使用JavaScript来处理按钮的点击事件，并切换按钮的高亮状态。

// 获取所有按钮
const buttons = document.querySelectorAll('.button');

// 为每个按钮添加点击事件监听器
buttons.forEach(button => {
  button.addEventListener('click', () => {
    // 移除所有按钮的高亮状态
    buttons.forEach(btn => btn.classList.remove('active'));

    // 为当前点击的按钮添加高亮状态
    button.classList.add('active');
  });
});

// 默认显示第一个按钮高亮
buttons[0].classList.add('active');

这样，当按钮被点击时，会移除所有按钮的高亮状态，并将当前点击的按钮添加高亮状态。同时，通过默认给第一个按钮添加高亮状态，实现了默认显示第一个按钮高亮的效果。