jquery活动类在代码笔中工作，但不是实际站点？

我使用jquery将活动类分配给单击的li

代码在codepen和jsfiddle中可以完美地工作，但在我的实际站点上却不能

在站点本身上，单击li时内容会显示，但边框底部不会显示，并且在检查代码时，在中单击时未设置活动类

jquery加载正常，而另一段代码运行正常

$(document).ready(function(){


   $('#wayfindermenu a').click(function(e){
     hideContentDivs();
     var tmp_div = $(this).parent().index();
     $('.maincontent div').eq(tmp_div).show();
  });

function hideContentDivs(){
    $('.maincontent div').each(function(){
    $(this).hide();});
}
hideContentDivs();
});

var selector = '#wayfindermenu li';

$(selector).on('click', function(){
    $(selector).removeClass('active');
    $(this).addClass('active');
});

---

看来这个

$(selector).on('click', function(){
    $(selector).removeClass('active');
    $(this).addClass('active');
});

在DOMready包装器之外，也许codepen会添加自己的包装器

这就是缩进很重要的原因

---

您还应该最后声明函数以保持整洁。

是否有任何错误？

$(document).ready(function(){

    $('#wayfindermenu a').click(function(e){
       hideContentDivs();
       var tmp_div = $(this).parent().index();
       $('.maincontent div').eq(tmp_div).show();
    });

    function hideContentDivs(){
       // no need to iterate
       /*$('.maincontent div').each(function(){
           $(this).hide();
       });*/
       $('.maincontent div').hide();
    }

    hideContentDivs();

    // This also needs to be in the DOMready wrapper
    // but in any case, there's a better way to write this bit
    /*var selector = '#wayfindermenu li';
    $(selector).on('click', function(){
        $(selector).removeClass('active');
        $(this).addClass('active');
    });*/
    $('#wayfindermenu li').on('click', function(){
        $(this).addClass('active').siblings().removeClass('active');
    });

});