如何实现单页侧边栏导航：点击切换并隐藏未选中内容

核心思路 #

用CSS控制内容板块的显示/隐藏，通过JavaScript给选中的导航项和对应内容添加active类，实现单页内的内容切换，无需拆分多份文件。

1. HTML 结构 #

<!-- 二级侧边栏导航 -->
<nav class="sidebar">
  <h3>作品集分类</h3>
  <ul>
    <li><a href="#web-design" class="nav-link active">网页设计</a></li>
    <li><a href="#ui-design" class="nav-link">UI设计</a></li>
    <li><a href="#illustration" class="nav-link">插画作品</a></li>
    <li><a href="#motion-graphics" class="nav-link">动态视觉</a></li>
  </ul>
</nav>

<!-- 内容板块 -->
<div class="content-container">
  <section id="web-design" class="content-section active">
    <h2>网页设计作品集</h2>
    <p>这里展示我的网页设计项目...</p>
  </section>
  <section id="ui-design" class="content-section">
    <h2>UI设计作品集</h2>
    <p>这里展示我的UI设计项目...</p>
  </section>
  <section id="illustration" class="content-section">
    <h2>插画作品集</h2>
    <p>这里展示我的插画作品...</p>
  </section>
  <section id="motion-graphics" class="content-section">
    <h2>动态视觉作品集</h2>
    <p>这里展示我的动态视觉项目...</p>
  </section>
</div>

2. CSS 样式 #

/* 侧边栏基础样式 */
.sidebar {
  width: 200px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  padding: 20px;
  background-color: #f5f5f5;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar .nav-link {
  display: block;
  padding: 10px 0;
  color: #333;
  text-decoration: none;
  margin-bottom: 8px;
}

/* 导航选中状态 */
.sidebar .nav-link.active {
  color: #007bff;
  font-weight: bold;
  border-left: 3px solid #007bff;
  padding-left: 8px;
}

/* 内容容器样式 */
.content-container {
  margin-left: 240px;
  padding: 20px;
}

/* 默认隐藏所有内容板块 */
.content-section {
  display: none;
}

/* 显示选中的内容板块 */
.content-section.active {
  display: block;
}

3. JavaScript 逻辑 #

// 获取所有导航链接和内容板块
const navLinks = document.querySelectorAll('.nav-link');
const contentSections = document.querySelectorAll('.content-section');

// 给每个导航链接添加点击事件
navLinks.forEach(link => {
  link.addEventListener('click', (e) => {
    // 阻止默认锚点跳转行为
    e.preventDefault();
    
    // 移除所有导航链接的active类
    navLinks.forEach(l => l.classList.remove('active'));
    // 移除所有内容板块的active类
    contentSections.forEach(section => section.classList.remove('active'));
    
    // 给当前点击的导航链接添加active类
    link.classList.add('active');
    // 获取对应内容板块的ID，添加active类使其显示
    const targetId = link.getAttribute('href').substring(1);
    document.getElementById(targetId).classList.add('active');
  });
});

关键说明 #

• 通过active类控制显示/隐藏：默认只有第一个板块和导航项带有active类，确保页面加载时显示初始内容。
• 阻止默认锚点跳转：避免页面滚动到锚点位置，保持页面布局稳定。
• 单页内完成所有逻辑：所有内容都在同一个HTML文件中，无需拆分多份文件。

内容的提问来源于stack exchange，提问作者0w0possum