点击左侧分类列表筛选对应div显示功能运行异常求助

存在的问题 #

• HTML标签属性错误：第一个分类li标签重复定义了class属性，导致active类不生效，部分浏览器也可能出现属性解析异常
• 缺少初始化逻辑：页面加载后所有右侧内容块默认都是显示状态，不符合初始仅展示main分类的要求
• 未确保DOM加载完成后再执行JS：如果JS代码放在HTML结构前加载，会无法选中对应元素，导致事件绑定失效
• 缺少选中态切换逻辑：点击分类后没有高亮当前选中的分类，用户体验差

修复后代码 #

HTML代码（仅调整了li标签的class属性写法） #

<section class="area1">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-12">
        <div class="section-title text-center pb-10">
          <h3 class="title">Aktuelle Angebote</h3>
          <p class="text">Hier werden Dir einige Angebote angezeigt. Schau Dich einfach um!</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-3 col-md-3">
        <div class="offer-menu text-center mt-50">
          <ul>
            <!-- 合并重复的class属性 -->
            <li class="filter_link active" data-filter=".main">Alles</li>
            <li class="filter_link" data-filter=".handys">Handys</li>
            <li class="filter_link" data-filter=".spiele">Videospiele</li>
            <li class="filter_link" data-filter=".books">Bücher</li>
            <li class="filter_link" data-filter=".toys">Spielzeug</li>
            <li class="filter_link" data-filter=".cams">Kameras</li>
            <li class="filter_link" data-filter=".auktionen">Auktionen</li>
          </ul>
        </div>
      </div>

      <div class="col-lg-9 col-md-9 main">
        <div>...</div>
      </div>
      <div class="col-lg-9 col-md-9 handys">
        <div>...</div>
      </div>
      <div class="col-lg-9 col-md-9 spiele">
        <div>...</div>
      </div>
      <div class="col-lg-9 col-md-9 books">
        <div>...</div>
      </div>
      <div class="col-lg-9 col-md-9 toys">
        <div>...</div>
      </div>
      <div class="col-lg-9 col-md-9 cams">
        <div>...</div>
      </div>
      <div class="col-lg-9 col-md-9 auktionen">
        <div>...</div>
      </div>
  </div>
</section>

JS代码 #

// 包裹jQuery DOM就绪回调，确保元素加载完成后再执行逻辑
$(function(){
  var $eBayElements = $('.row > div.col-lg-9');
  var $filterLinks = $('.filter_link');
  // 初始化状态：隐藏所有内容，仅展示main分类
  $eBayElements.hide().filter('.main').show();

  $filterLinks.click(function(e){
    e.preventDefault();
    var filterVal = $(this).data('filter');
    // 切换分类选中高亮
    $filterLinks.removeClass('active');
    $(this).addClass('active');
    // 切换对应内容显示
    $eBayElements.hide().filter(filterVal).show();
  });
})

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