为何点击的分类无法保持active类？模态框切换异常求助

嘿，我帮你梳理下这个问题的根源和解决办法，主要有几个关键错误导致了当前的情况：

1. 类名拼写失误 #

你的jQuery代码里写了removeClass('ative')和addClass('ative')——这里把active拼成了ative！这个拼写错误直接让添加/移除激活类的操作完全失效，因为根本找不到这个错误的类名。

2. 选错了添加active类的目标元素 #

菜单里的active类是加在<li>标签上的，但你执行$('#showCategories').addClass('active')是给「全部分类」的<a>标签加类，位置不对自然看不到效果。得给它的父级<li>添加active类才行。

3. 模态框点击后没关联到顶部菜单的对应项 #

你当前的代码是给模态框里的li加active类，但我们需要的是给顶部菜单里对应ID的分类li加激活状态，同时移除其他li的active类，这样菜单才会正确显示当前选中的分类。

修正后的完整jQuery代码 #

$(function() {
    $("a[name='category']").on('click', function(){
        const categoryText = $(this).text();
        const categoryId = $(this).attr("id");
        
        // 更新「全部分类」按钮的显示文本
        $('#showCategories').html(`${categoryText} <i class="fa fa-caret-down" aria-hidden="true"></i>`);
        
        // 关闭模态框
        $('.bd-example-modal-lg').modal('hide');
        
        // 重置菜单所有项的激活状态，再给对应项添加active
        $('.Categories__Menu li').removeClass('active');
        if(categoryText === 'All Categories'){
            // 点击的是模态框里的「全部分类」，给菜单里的最后一个li加激活类
            $('#showCategories').parent('li').addClass('active');
        } else {
            // 点击的是具体分类，找到菜单里对应ID的分类项，给它的父li加激活类
            $('.Categories__Menu a[id="' + categoryId + '"]').parent('li').addClass('active');
        }
        
        // AJAX请求获取文章列表（修正了类名拼写错误）
        $.ajax({
            url: '{{ route('category.posts',null) }}/' + categoryId,
            type: 'GET',
            success:function(result){
                $('#posts').empty();
                let newPosts = '';
                const placeholder = "{{route('posts.show', ['id' => '1', 'slug' => 'demo-slug'])}}";
                $.each(result, function(index, post) {
                    const url = placeholder.replace(1, post.id).replace('demo-slug', post.slug);
                    newPosts += `
                        <div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">
                            <div class="card box-shaddow">
                                <img class="card-img-top" src="${post.image}" alt="Card image cap">
                                <div class="card-body">
                                    <h5 class="card-title h6 font-weight-bold text-heading-blue">${post.title}</h5>
                                </div>
                            </div>
                        </div>
                    `;
                });
                $('#posts').html(newPosts);
            },
            error: function(error) {
                console.log(error.status)
            }
        });
    });
});

额外的小建议 #

• 菜单里的第一个li默认加了active类，建议改成只有第一个分类默认激活，或者根据当前页面的分类动态设置，避免初始状态的逻辑冲突。
• 模态框里的「All Categories」a标签最好加上name="category"和id="0"（自定义一个标识全部分类的ID），这样点击它也能触发统一的AJAX逻辑，请求全部分类的文章。

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