左边菜单，点击左边右边内容改变代码

好的，以下是一个简单的左侧菜单点击切换右侧内容的示例代码：

HTML 代码：

<div class="container">
  <nav>
    <ul>
      <li><a href="#section1">Section 1</a></li>
      <li><a href="#section2">Section 2</a></li>
      <li><a href="#section3">Section 3</a></li>
    </ul>
  </nav>
  <main>
    <section id="section1">
      <h2>Section 1</h2>
      <p>Content for section 1 goes here.</p>
    </section>
    <section id="section2">
      <h2>Section 2</h2>
      <p>Content for section 2 goes here.</p>
    </section>
    <section id="section3">
      <h2>Section 3</h2>
      <p>Content for section 3 goes here.</p>
    </section>
  </main>
</div>

CSS 代码：

.container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

nav {
  background-color: #f2f2f2;
  width: 20%;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav li {
  margin: 0;
}

nav a {
  display: block;
  padding: 0.5rem;
  text-decoration: none;
  color: #333;
}

nav a:hover {
  background-color: #333;
  color: #fff;
}

main {
  flex: 1;
  padding: 1rem;
}

section {
  padding: 1rem;
  background-color: #fff;
  border: 1px solid #ccc;
  margin-bottom: 1rem;
}

section h2 {
  margin-top: 0;
}

JavaScript 代码：

const sections = document.querySelectorAll("section");

document.querySelectorAll("nav a").forEach((item) => {
  item.addEventListener("click", (event) => {
    event.preventDefault();

    const id = item.getAttribute("href").slice(1);

    sections.forEach((section) => {
      section.style.display = section.getAttribute("id") === id ? "block" : "none";
    });

    document.querySelectorAll("nav a").forEach((link) => {
      link.classList.remove("active");
    });

    item.classList.add("active");
  });
});

代码解释：

这段代码中，我们首先使用了 flex 布局来创建一个左右两个部分的容器。左侧部分是一个导航菜单，右侧部分是一个内容区域。导航菜单使用了 HTML 的 ul 和 li 标签来创建，然后使用 CSS 设置了样式。右侧内容区域则使用了 HTML 的 section 标签来创建，每个 section 标签分别对应了导航菜单中的一个菜单项。

JavaScript 代码中，我们首先使用了 document.querySelectorAll() 方法来获取所有的 section 标签，然后使用 forEach() 方法和 addEventListener() 方法来为导航菜单中的每个菜单项添加点击事件。当用户点击某个菜单项时，我们首先使用 event.preventDefault() 方法来防止默认的页面跳转行为。然后，我们获取被点击菜单项的 id 属性，然后遍历所有的 section 标签，根据 id 属性来判断哪个 section 要显示，哪个 section 要隐藏。最后，我们还添加了一个 active 类来突出显示当前被点击的菜单项。

以上就是一个简单的左侧菜单点击切换右侧内容的示例代码。