两个连续的按钮<button>切换的时候有高亮下划线

当你设计网页或应用中需要实现两个连续按钮（比如“上一页”和“下一页”）切换时，并希望在用户点击之间有高亮效果和下划线指示当前选中状态，你可以采用以下CSS样式来达成这个效果：

1. 首先，给按钮元素添加一个共同的class，例如`.nav-button`，并设置基础样式，如背景色、边框和字体等。

.nav-button {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

2. 然后，为激活（或高亮）的状态创建一个新的class，比如`.active`，并设置相应的样式，通常会选择改变背景颜色和添加下划线样式：

.nav-button.active {
  background-color: #eaeaea; /* 高亮颜色 */
}

/* 如果你想显示下划线，可以这样做 */
.nav-button:active, .nav-button.active {
  text-decoration: underline; /* 添加下划线 */
}

3. 最后，使用JavaScript来处理按钮的切换事件。当第一个按钮被点击时，将其设为active状态；当第二个按钮被点击时，将第一个按钮恢复默认状态，第二个按钮变为active状态。这里是一个简单的HTML+JavaScript示例：

<div>
  <button class="nav-button" id="prevButton">上一页</button>
  <button class="nav-button active" id="nextButton">下一页</button>
</div>

<script>
document.getElementById("prevButton").addEventListener("click", function() {
  document.getElementById("prevButton").classList.remove("active");
  document.getElementById("nextButton").classList.add("active");
});

document.getElementById("nextButton").addEventListener("click", function() {
  document.getElementById("prevButton").classList.add("active");
  document.getElementById("nextButton").classList.remove("active");
});
</script>