在锚点单击上更改 DIV Class

Question

我看过一些类似的帖子，但我对 Javascript 了解不多，所以我想知道您是否可以提供帮助。

我有以下代码，当单击主菜单链接（例如#contact ）时，会更改<div class="contact">的 CSS Class 并添加一些额外的类以使上一页消失并新页面再现：

$('.top-menu').on('click', 'a', function(){

    /* vars */
    var width = $(window).width();
    var id = $(this).attr('href');
    var h = parseFloat($(id).offset().top);
    var card_item = $(id);
    var menu_items = $('.top-menu li');
    var menu_item = $(this).closest('li');
    var d_lnk = $('.lnks .lnk.discover');

    if((width >= 1024)) {
        
        /* if desktop */
        if(!menu_item.hasClass('active') & (width > 1023) & $('#home-card').length) {

            /* close card items */
            menu_items.removeClass('active');
            container.find(card_items).removeClass('animated '+animation_in);

            if($(container).hasClass('opened')) {
                container.find(card_items).addClass('animated '+animation_out);
            }

            /* open card item */
            menu_item.addClass('active');
            container.addClass('opened');
            container.find(card_item).removeClass('animated '+animation_out);
            container.find(card_item).addClass('animated '+animation_in);
            
            $(card_items).addClass('hidden');
            
            $(card_item).removeClass('hidden');
            $(card_item).addClass('active');
        }
    }

是否可以调整此代码，以使任何带有更改页面changepage的链接也具有相同的行为？

作为进一步的改进，是否有可能让这个 function 基于当前页面 URL/页面加载发生，这样如果用户被发送到网站的联系页面就会发生（所以他们不必单击联系页面，它会自动加载）。

预先感谢您的支持。

Answer 1

请尝试使用以下（删除：）修复 if 语句：

if(menu_item.hasClass('active') & (width > 1023) & $('#home-card').length)

这些代码行彼此很奇怪：id 得到 jquery object，然后进入 $()。
这会产生冲突。

var id = $(this).attr('href');
var card_item = $(id);