点击侧边导航栏链接时，如何切换右侧对应内容？

步骤1：调整HTML结构，建立导航与内容的关联 #

给导航链接添加data-target属性，指向对应内容区域的ID；同时给所有内容区域添加统一类名，方便批量操作，默认仅显示第一个内容，其余隐藏。

修改后的HTML：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

<div class="settings">
  <div class="side-nav">
    <ul class="sidebar-nav">
      <li>
        <a class="nav-link active" href="#" data-target="#name-tab">Name</a>
      </li>
      <li>
        <a class="nav-link" href="#" data-target="#password-tab">Password</a>
      </li>
      <li>
        <a class="nav-link" href="#" data-target="#security-tab">Security</a>
      </li>
    </ul>
  </div>
  <div class="tab-details">
    <div id="name-tab" class="tab-content-item active">
      <form>
        <label class="form-label" for="first-name">Name</label>
        <input type="text" id="first-name" class="form-control" />

        <button type="submit" class="btn btn-primary btn-block mb-4">
                  Save
                </button>
      </form>
    </div>
    <div id="password-tab" class="tab-content-item">
      <form>
        <label class="form-label" for="password">Password</label>
        <input type="password" id="password" class="form-control" />

      </form>
    </div>
    <div id="security-tab" class="tab-content-item">
      <form>
        <label class="form-label" for="security-question">Security Question</label>
        <input type="text" id="security-question" class="form-control" />
        <button type="submit" class="btn btn-primary btn-block mb-4 mt-2">
                  Save
                </button>
      </form>
    </div>
  </div>
</div>

步骤2：添加CSS样式控制显示隐藏 #

通过类名控制内容区域的显示状态，同时给激活的导航链接添加高亮：

.settings {
  display: flex;
}

.tab-details {
  margin-left: 30px;
  margin-top: 20px
}

.tab-content-item {
  display: none;
}

.tab-content-item.active {
  display: block;
}

.sidebar-nav .nav-link.active {
  color: #0d6efd;
  font-weight: bold;
}

步骤3：编写原生JavaScript实现切换逻辑 #

获取所有导航链接和内容项，绑定点击事件，切换对应内容的显示状态与导航的激活状态：

// 获取所有导航链接和内容项
const navLinks = document.querySelectorAll('.sidebar-nav .nav-link');
const contentItems = document.querySelectorAll('.tab-content-item');

// 给每个导航链接绑定点击事件
navLinks.forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认跳转行为
    
    // 移除所有导航链接的active类
    navLinks.forEach(l => l.classList.remove('active'));
    // 给当前点击的链接添加active类
    this.classList.add('active');
    
    // 获取目标内容的ID
    const targetId = this.getAttribute('data-target');
    // 隐藏所有内容项
    contentItems.forEach(item => item.classList.remove('active'));
    // 显示目标内容项
    document.querySelector(targetId).classList.add('active');
  });
});

核心逻辑说明 #

• 用data-target属性建立导航与内容的对应关系，逻辑清晰易维护；
• 依赖active类控制显示隐藏，风格与Bootstrap统一；
• 原生JS实现，无额外依赖，轻量化且兼容性好。

内容的提问来源于stack exchange，提问作者Sreehari Avikkal