怎么实现点击左侧导航，对应显示右侧的内容

实现左侧导航和右侧内容的联动，可以通过 JavaScript 来实现。以下是一种基于 jQuery 的实现方式：

HTML 代码：

<div class="container">
  <div class="sidebar">
    <ul>
      <li><a href="#section-1">Section 1</a></li>
      <li><a href="#section-2">Section 2</a></li>
      <li><a href="#section-3">Section 3</a></li>
    </ul>
  </div>
  <div class="main-content">
    <div id="section-1" class="section">
      <h2>Section 1</h2>
      <p>这是第一部分的内容。</p>
    </div>
    <div id="section-2" class="section">
      <h2>Section 2</h2>
      <p>这是第二部分的内容。</p>
    </div>
    <div id="section-3" class="section">
      <h2>Section 3</h2>
      <p>这是第三部分的内容。</p>
    </div>
  </div>
</div>

CSS 代码：

.container {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 200px;
  background-color: #f0f0f0;
}

.main-content {
  flex: 1;
}

.section {
  display: none;
}

JavaScript 代码：

$(function() {
  // 为左侧导航菜单绑定点击事件
  $('.sidebar a').click(function(e) {
    e.preventDefault();
    // 获取对应的内容区域
    var target = $(this).attr('href');
    // 隐藏所有内容区域
    $('.section').hide();
    // 显示目标内容区域
    $(target).show();
  });
});

这段代码中，我们使用了 jQuery 库来简化 DOM 操作。首先，为左侧导航菜单中的链接绑定点击事件。在事件处理函数中，使用 `$(this).attr('href')` 获取目标内容区域的选择器，然后使用 `$('.section').hide()` 将所有内容区域隐藏，最后使用 `$(target).show()` 显示目标内容区域。

在 CSS 中，我们将内容区域的 display 属性设置为 none，使其一开始隐藏。在 JavaScript 中，我们使用 show() 和 hide() 方法来控制内容区域的显示和隐藏。

这样，点击左侧导航菜单时，就可以显示对应的右侧内容了。