web实现同一界面通过按钮加载不同内容

Web上实现同一页面通过按钮加载不同内容通常采用的是JavaScript、Ajax（Asynchronous JavaScript and XML）或者更现代的Fetch API等技术。这里是一个简单的例子：

1. **HTML结构**：创建一个基础的页面，包含一个隐藏的内容区域和几个按钮，每个按钮对应一种不同的内容。

<button id="btn1">显示内容1</button>
<button id="btn2">显示内容2</button>

<div id="content" style="display:none;">
  <div id="content1">这是内容1...</div>
  <div id="content2">这是内容2...</div>
</div>

2. **JavaScript**：给每个按钮添加点击事件处理器，当点击时异步请求和显示相应的内容。

document.getElementById('btn1').addEventListener('click', function() {
  showContent('content1');
});

document.getElementById('btn2').addEventListener('click', function() {
  showContent('content2');
});

function showContent(contentId) {
  var content = document.getElementById(contentId);
  content.style.display = 'block';
}

在这个例子中，`showContent`函数会根据传入的内容ID（如`content1`或`content2`）切换显示的内容区域。用户可以根据当前显示的内容按钮选择点击其他按钮以加载新的内容。