求助：实现Navbar点击切换Div的jQuery淡入淡出过渡效果

首先我注意到你给出的Div结构里少了对应HOME链接的#home-container，先把这个补上，不然HOME点击后没内容显示。另外你的jQuery代码有几个问题：直接用hide()再调用fadeIn()会导致动画冲突，没有阻止a标签的默认跳转（点击会跳回页面顶部），也没处理Navbar的active类切换，而且代码重复度高。

下面是完整的解决方案，包含HTML、CSS和修正后的jQuery：

完整代码示例 #

HTML（补全缺失的home-container） #

<!-- Navbar部分保留你原来的代码 -->
<div class="collapse navbar-collapse" id="navbarResponsive">
  <ul class="navbar-nav ml-auto">
    <li class="nav-item active">
      <a class="nav-link" id="home" href="#">HOME</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="portfolio" href="#">PORTFOLIO</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="about" href="#">ABOUT</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="contact" href="#">CONTACT</a>
    </li>
  </ul>
</div>

<!-- 补全home-container，所有contain类的Div设置统一样式 -->
<div id="home-container" class="contain">
  <h1>HOME</h1>
</div>
<div id="portfolio-container" class="contain">
  <h1>PORTFOLIO</h1>
</div>
<div id="about-container" class="contain">
  <h1>ABOUT</h1>
</div>
<div id="contact-container" class="contain">
  <h1>CONTACT</h1>
</div>

CSS（确保Div占满视口，切换时无滚动） #

/* 设置所有contain类的Div绝对定位，占满整个视口，默认隐藏 */
.contain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  /* 可选：添加内边距避免内容被Navbar遮挡 */
  padding-top: 70px;
  box-sizing: border-box;
}

/* 默认显示home-container */
#home-container {
  display: block;
}

jQuery（修正动画逻辑，统一事件处理） #

$(document).ready(function() {
  // 监听所有Navbar的链接点击
  $('.nav-link').click(function(e) {
    // 阻止a标签默认跳转（避免跳回顶部）
    e.preventDefault();
    
    // 获取当前点击的链接ID，拼接对应container的ID
    const targetId = $(this).attr('id') + '-container';
    const $targetContainer = $('#' + targetId);
    
    // 如果目标容器已经显示，直接返回，避免重复动画
    if ($targetContainer.is(':visible')) return;
    
    // 先淡出当前可见的容器，完成后再淡入目标容器
    $('.contain:visible').fadeOut(300, function() {
      $targetContainer.fadeIn(300);
    });
    
    // 切换Navbar的active类，高亮当前选中的链接
    $('.nav-item').removeClass('active');
    $(this).parent('.nav-item').addClass('active');
  });
});

关键修正点说明 #

• 阻止默认跳转：用e.preventDefault()避免点击#时页面跳回顶部，保证过渡效果流畅。
• 动画顺序：使用fadeOut()的回调函数，确保当前容器完全淡出后，再淡入目标容器，不会出现重叠闪烁。
• 统一事件处理：不用给每个链接单独写点击函数，通过类选择器统一处理，代码更简洁易维护。
• active类切换：点击后更新Navbar的active状态，让用户清楚当前所在页面。
• CSS定位：设置position: absolute和height: 100vh，让每个Div占满整个视口，实现“无需滚动”的切换效果。

内容的提问来源于stack exchange，提问作者Sandy Leach