点击侧边栏标题时如何让内容显示在右侧主区域？

你的代码存在两个核心问题，导致出现内容位置不对和点击无响应的情况，下面是具体的解决思路和修正代码：

一、解决内容不在右侧的问题：调整布局 #

原CSS没有设置左右分栏的布局，所以内容自然不会显示在右侧。给容器.main添加flex布局，就能让侧边栏和主内容区并排：

.main {
  display: flex;
  gap: 20px; /* 侧边栏和主内容的间距 */
}
.sidenav {
  width: 200px;
  border-right: 1px solid #eee; /* 可选，添加分隔线更清晰 */
}
main {
  flex: 1; /* 让主内容区占满剩余宽度 */
}

二、解决点击无响应的问题：修正JS逻辑 #

原JS的问题有三个：

• 用var声明循环变量i，导致所有点击事件里的i都是循环结束后的最终值，无法正确对应标题索引
• 代码里操作this.nextElementSibling，但内容并不在标题的下一个元素，完全找不到目标内容
• 标题和内容没有建立对应关系，点击时不知道该显示哪段内容

修正步骤： #

1. 给HTML里的标题和内容添加data-id属性，建立一一对应的关联：

<div class="main">
  <div class="sidenav">
    <div class="entry" data-id="1">test</div>
    <div class="entry" data-id="2">test2</div>
  </div>
  <main>
    <p class="entry-content" data-id="1">helloo</p>
    <p class="entry-content" data-id="2">hiiii</p>
  </main>
</div>

2. 重写JS逻辑，用forEach遍历避免闭包陷阱，通过data-id找到对应内容：

const entries = document.querySelectorAll(".entry");
const contents = document.querySelectorAll(".entry-content");

entries.forEach(entry => {
  entry.addEventListener("click", function() {
    const targetId = this.getAttribute("data-id");
    // 先隐藏所有内容
    contents.forEach(content => content.classList.remove("show"));
    // 显示对应id的内容
    const targetContent = document.querySelector(`.entry-content[data-id="${targetId}"]`);
    targetContent.classList.add("show");
  });
});

完整可运行代码 #

<div class="main">
  <div class="sidenav">
    <div class="entry" data-id="1">test</div>
    <div class="entry" data-id="2">test2</div>
  </div>
  <main>
    <p class="entry-content" data-id="1">helloo</p>
    <p class="entry-content" data-id="2">hiiii</p>
  </main>
</div>

<style>
.main {
  display: flex;
  gap: 20px;
  padding: 10px;
}
.sidenav {
  width: 200px;
  border-right: 1px solid #eee;
}
.entry {
  color: #d49a95;
  cursor: pointer;
  padding: 10px;
  transition: background 0.2s;
}
.entry:hover {
  background-color: #f5f5f5; /* 可选，添加hover效果提升体验 */
}
.entry-content {
  display: none;
  padding: 10px;
}
.show {
  display: block;
}
</style>

<script>
const entries = document.querySelectorAll(".entry");
const contents = document.querySelectorAll(".entry-content");

entries.forEach(entry => {
  entry.addEventListener("click", function() {
    const targetId = this.getAttribute("data-id");
    contents.forEach(content => content.classList.remove("show"));
    document.querySelector(`.entry-content[data-id="${targetId}"]`).classList.add("show");
  });
});
</script>

关键改动说明 #

• 布局：通过flex实现左右分栏，让侧边栏和主内容区横向排列
• 元素关联：用data-id属性建立标题和内容的对应关系，解决点击时找不到目标内容的问题
• JS逻辑：用forEach替代var循环避免闭包陷阱，先隐藏所有内容再显示目标内容，逻辑更简洁可靠

内容的提问来源于stack exchange，提问作者2205j00