商城网页广告分类设计jquery

以下是一个简单的商城网页广告分类设计的 jQuery 代码示例：

HTML 代码：

<div class="advertisement-categories">
  <ul>
    <li><a href="#" class="active" data-category="all">All</a></li>
    <li><a href="#" data-category="electronics">Electronics</a></li>
    <li><a href="#" data-category="fashion">Fashion</a></li>
    <li><a href="#" data-category="home">Home</a></li>
  </ul>
</div>

<div class="advertisements">
  <div class="advertisement" data-category="electronics">
    <img src="electronics-ad.png" alt="Electronics Advertisement">
  </div>
  <div class="advertisement" data-category="fashion">
    <img src="fashion-ad.png" alt="Fashion Advertisement">
  </div>
  <div class="advertisement" data-category="home">
    <img src="home-ad.png" alt="Home Advertisement">
  </div>
  <div class="advertisement" data-category="electronics">
    <img src="electronics-ad-2.png" alt="Electronics Advertisement 2">
  </div>
  <div class="advertisement" data-category="fashion">
    <img src="fashion-ad-2.png" alt="Fashion Advertisement 2">
  </div>
  <div class="advertisement" data-category="home">
    <img src="home-ad-2.png" alt="Home Advertisement 2">
  </div>
</div>

JavaScript/jQuery 代码：

$(document).ready(function() {
  // 初始状态：显示所有广告
  $(".advertisement").show();

  // 当点击广告类别列表中的链接时
  $(".advertisement-categories a").click(function() {
    // 防止默认行为
    event.preventDefault();
    
    // 获取当前类别
    var category = $(this).data("category");
    
    // 从所有广告中筛选出符合当前类别的广告
    if (category === "all") {
      $(".advertisement").show();
    } else {
      $(".advertisement").hide();
      $(".advertisement[data-category='" + category + "']").show();
    }
    
    // 更新链接的激活状态
    $(".advertisement-categories a").removeClass("active");
    $(this).addClass("active");
  });
});

该代码会根据用户点击的广告类别，动态筛选出符合该类别的广告，并且更新链接的激活状态。注意，此示例仅供参考，实际实现可能需要根据具体需求进行修改。