html左侧侧边栏点击左侧导航更改右侧主体内容

HTML和CSS通常结合JavaScript用于构建这种响应式的布局，被称为"单页应用"(Single Page Application, SPA)。当用户点击左侧的导航菜单时，前端框架如Vue、React或Angular通常会通过JavaScript操作DOM来改变右侧主体区域的内容，而不是进行页面刷新。具体步骤如下：

1. **HTML结构**：左侧有一个导航栏（包含链接），右侧设置为内容区域，常常用`<div>`标签包裹。

<div class="container">
   <nav id="sidebar">...</nav>
   <main id="content">...</main>
</div>

2. **CSS样式**：定义侧边栏和主体的默认布局和显示隐藏规则。

3. **JavaScript处理**：在JavaScript中监听导航链接的点击事件，例如通过`addEventListener`：

document.getElementById('sidebar').addEventListener('click', function(e) {
    var target = e.target;
    if (target.matches('#sidebar-link')) { // 针对特定链接
        document.getElementById('content').innerHTML = '<p>新的内容...</p>'; // 更新右侧内容
    }
});

这里假设每个导航链接都有一个共同的标识`#sidebar-link`。