点击侧边菜单实现div无刷新切换（带淡入/滑动效果）

1. 原有CSS问题修正 #

你当前代码的核心问题是所有内容面板默认opacity:0，且重复写了大量相同样式，同时直接用display切换无法实现过渡动画。调整后的CSS代码如下：

/* 父容器加相对定位，让内部绝对定位的面板可以正确对齐 */
.gallery-chng {
  width: 75%;
  height: 90%;
  position: relative;
}
/* 抽离所有画廊面板的公共样式，减少重复代码 */
.gallery-panel {
  width: 100%;
  height: 100%;
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
  padding: 15px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  row-gap: 3%;
  column-gap: 3%;
  opacity: 0;
  pointer-events: none; /* 隐藏状态禁止点击穿透 */
  transition: opacity 0.5s ease; /* 淡入淡出过渡 */
}
/* 面板激活状态：显示且可点击 */
.gallery-panel.active {
  opacity: 1;
  pointer-events: auto;
}
/* 保留你原有的图片样式、hover效果，无需修改 */
.sl {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition: all 1s;
  color: black;
}
.sl a:hover:after {
  content: "Full Gallery";
  height: 100%;
  width: 100%;
  background-color: rgba(105, 95, 95, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  transition: all 5s ease;
}

2. HTML结构关联调整 #

给菜单和内容面板加对应标识，让JS可以精准匹配点击动作和要显示的内容，调整后的HTML结构：

<div class="albcont">
  <div class="albmenu">
    <ul>
      <li><a href="javascript:void(0)" data-target="panel-family">Family</a></li>
      <li><a href="javascript:void(0)" data-target="panel-weddings">Weddings</a></li>
      <li><a href="javascript:void(0)" data-target="panel-business">Business</a></li>
      <li><a href="javascript:void(0)" data-target="panel-sports">Sports</a></li>
      <li><a href="gallery.html">Full Gallery</a></li>
    </ul>
  </div>
  <div class="gallery-chng">
    <!-- 默认激活Family分类，页面加载就显示对应内容 -->
    <div class="gallery-panel active panel-family">
      <div class="slika1 sl"><a href="gallery-family.html"><img src="img1.jpg" alt=""></a></div>
      <div class="slika2 sl"><a href="gallery-family.html"><img src="img2.jpg" alt=""></a></div>
      <div class="slika3 sl"><a href="gallery-family.html"><img src="img3.jpg" alt=""></a></div>
      <div class="slika4 sl"><a href="gallery-family.html"><img src="img4.jpg" alt=""></a></div>
    </div>
    <div class="gallery-panel panel-weddings">
      <div class="slika1 sl"><a href="gallery-weddings.html"><img src="img1-1.jpg" alt=""></a></div>
      <div class="slika2 sl"><a href="gallery-weddings.html"><img src="img2-2.jpg" alt=""></a></div>
      <div class="slika3 sl"><a href="gallery-weddings.html"><img src="img3-3.jpg" alt=""></a></div>
      <div class="slika4 sl"><a href="gallery-weddings.html"><img src="img4-4.jpg" alt=""></a></div>
    </div>
    <!-- 后续新增分类只要照着上面的结构，加对应class名的panel即可 -->
  </div>
</div>

3. 极简JS切换逻辑 #

代码没有复杂封装，新手可以逐行理解逻辑：

// 获取所有侧边栏带触发标识的菜单项
const menuTriggers = document.querySelectorAll('.albmenu a[data-target]');
// 获取所有画廊内容面板
const contentPanels = document.querySelectorAll('.gallery-panel');

// 给每个菜单项绑定点击事件
menuTriggers.forEach(trigger => {
  trigger.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止a标签默认跳转行为
    // 先清除所有面板的激活状态，回到隐藏样式
    contentPanels.forEach(panel => panel.classList.remove('active'));
    // 读取当前点击项对应的目标面板类名
    const targetClass = this.getAttribute('data-target');
    // 给目标面板加上激活类，自动触发CSS的淡入过渡效果
    document.querySelector('.' + targetClass).classList.add('active');
  })
})

功能扩展提示 #

• 后续新增Business、Sports分类时，仅需两处操作：
  • 在侧边菜单加对应项，把data-target设置为和面板一致的类名（比如panel-business）
  • 在.gallery-chng容器里新增对应类名的gallery-panel容器，放入分类内容即可，无需修改JS代码
• 如果要把淡入效果替换为滑动效果，仅需修改CSS中面板的初始和激活状态的位移值：

  .gallery-panel {
    /* 原有公共样式保留，新增下面的位移配置 */
    transform: translateX(100%); /* 初始状态滑到容器右侧外隐藏 */
    transition: all 0.5s ease;
  }
  .gallery-panel.active {
    transform: translateX(0); /* 激活状态滑回容器可视区域 */
  }
  

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