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

在Web开发中，实现同一界面通过按钮加载不同内容通常会使用模板（Template）或者动态内容加载的技术，比如JavaScript、jQuery或更现代的React、Vue等前端框架。这里是一个基本的例子：

1. **HTML模板**：设计一个基础的HTML结构，其中包含一个区域用于显示内容（比如 `<div id="content">`）。每个按钮对应一种不同的内容，点击按钮时，对应的HTML片段会被插入到这个区域内。

<div id="container">
   <button onclick="loadContent('content1.html')">内容1</button>
   <button onclick="loadContent('content2.html')">内容2</button>
   <div id="content"></div>
</div>

2. **JavaScript（如jQuery）**：创建一个 `loadContent` 函数，接收一个URL作为参数，使用`$.get`或`$.ajax`方法从服务器获取内容并替换到`#content`区。

function loadContent(url) {
    $.get(url, function(data) {
        $('#content').html(data);
    });
}

3. **现代框架（如React）**：可以使用组件化思想，创建一个父组件管理不同内容的切换，点击按钮时通过props传递不同的组件实例给`<content>`组件渲染。

import Content1 from './Content1';
import Content2 from './Content2';

function App() {
    return (
        <div>
            <button onClick={() => this.setState({ content: Content1 })}>内容1</button>
            <button onClick={() => this.setState({ content: Content2 })}>内容2</button>
            <Content content={this.state.content} />
        </div>
    );
}

export default App;