解决方法：

在以下示例中，我们将展示如何使用HTML、CSS和JavaScript来实现不同按钮的切换功能。

HTML部分：

按钮1
按钮2
按钮3

内容1
内容2
内容3

CSS部分：

.content {
  display: none;
}

.active {
  background-color: blue;
  color: white;
}

JavaScript部分：

function toggleContent(contentId) {
  var content = document.getElementById(contentId);
  var buttons = document.getElementsByClassName("active");
  
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].classList.remove("active");
  }
  
  content.style.display = "block";
  event.target.classList.add("active");
}

解释说明：

1. 我们使用HTML 元素来表示不同的按钮，并给每个按钮添加一个 onclick 事件处理函数。
2. 我们使用HTML
   元素来表示不同的内容，并给每个内容添加一个唯一的 id 属性。
3. 我们使用CSS来隐藏所有的内容，并为当前选中的按钮添加一个特定的样式（使用 active 类）。
4. 在JavaScript中，我们定义了一个名为 toggleContent 的函数，它接受一个参数 contentId，该参数是要切换显示的内容的 id。
5. 在函数内部，我们首先获取要显示的内容元素和当前处于活动状态的按钮元素。
6. 然后，我们使用一个循环来移除所有处于活动状态的按钮的 active 类。
7. 接下来，我们将要显示的内容元素的显示样式设置为 block，以便它在页面上可见。
8. 最后，我们为点击的按钮元素添加 active 类，以突出显示当前选中的按钮。

通过这种方式，当用户点击不同的按钮时，相应的内容将显示出来，并且只有当前选中的按钮会突出显示。