如何实现点击导航菜单切换Web页面对应系列的产品滑块内容

核心思路 #

给每个产品项添加对应系列的分类标识，给导航菜单项绑定点击事件，点击时筛选出对应分类的产品，更新滑块内容并重置滑块位置。

具体实现步骤 #

1. 给产品和导航项添加分类标识 #

• 在HTML中，给每个产品项容器添加data-category属性，标记所属系列：

  <div class="product-item" data-category="rayzen3">AMD RAYZEN3产品内容</div>
  <div class="product-item" data-category="rayzen5">AMD RAYZEN5产品内容</div>
  

• 给每个导航菜单项添加对应分类的data-target属性：

  <nav class="navigation-bar">
    <button class="nav-menu" data-target="rayzen3">AMD RAYZEN3</button>
    <button class="nav-menu" data-target="rayzen5">AMD RAYZEN5</button>
    <button class="nav-menu" data-target="all">全部产品</button>
  </nav>
  

2. 编写过滤逻辑的JavaScript代码 #

• 先获取页面中的导航项、产品项和滑块容器，再绑定点击事件实现过滤：

  // 获取元素
  const navMenus = document.querySelectorAll('.nav-menu');
  const allProducts = document.querySelectorAll('.product-item');
  const sliderContainer = document.querySelector('.product-slider-container');
  // 假设你原有滑块用currentSlide控制当前位置
  let currentSlide = 0;
  
  // 绑定导航点击事件
  navMenus.forEach(menu => {
    menu.addEventListener('click', () => {
      const targetCategory = menu.dataset.target;
      // 清空滑块容器
      sliderContainer.innerHTML = '';
  
      // 筛选对应分类的产品并添加回容器
      allProducts.forEach(product => {
        if (targetCategory === 'all' || product.dataset.category === targetCategory) {
          sliderContainer.appendChild(product.cloneNode(true));
        }
      });
  
      // 重置滑块状态
      currentSlide = 0;
      // 调用你原有滑块的更新函数，确保滑块显示正常
      updateSliderDisplay();
    });
  });
  
  // 这里是你原有滑块的更新逻辑示例，根据实际代码调整
  function updateSliderDisplay() {
    const slides = document.querySelectorAll('.product-item');
    // 比如通过控制transform实现滑动，或者控制display属性
    slides.forEach((slide, index) => {
      slide.style.transform = `translateX(-${currentSlide * 100}%)`;
    });
  }
  

3. 适配现有代码的注意事项 #

• 如果你的产品项是动态生成的，要确保生成时同步添加data-category属性
• 克隆产品节点时，cloneNode(true)会复制所有子元素和绑定的事件，若不需要复制事件可改用cloneNode(false)
• 过滤完成后必须重置滑块的当前位置（比如currentSlide = 0），避免出现显示错位

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