javascript - 由于特殊性，使用 jQuery 添加 'active' 类不起作用

Question

我创建了一个充当过滤器的导航，并根据点击导航中的过滤器/项目从 Firebase 获取内容。

过滤器工作得很好，但是我试图让它在用户单击过滤器时显示事件类。我的 setActive() 函数可以分别将事件类添加到项目中，但是由于特殊性，事件类不起作用。

我也在使用 LESS，并且想了解添加 &:active 的更好方法，而不仅仅是添加独立的事件类。

JS

//Sets the Active Class once a filter has been selected

function setActive() {
    $('#filters').on('click','li',function(){
        $('#filters li.active').removeClass('active');
        $(this).addClass('active');
    });
}

setActive();

// A click functions for each filter, that sets filterToSelect for Firebase respectively

$('body').on('click', '#filter-storage', function(e) {
    e.preventDefault();

    filterToSelect = "storage";
    setFilter(filterToSelect);
});

HTML

<div id="filters" class="filters">
                <ul>
                    <li id="filter-all">All Categories</li>
                    <li id="filter-browser">Browser</li>
                    <li id="filter-chat">Chat</li>
                    <li id="filter-email">Email</li>
                    <li id="filter-encryption">Encryption</li>
                    <li id="filter-os">os</li>
                    <li id="filter-storage">Storage</li>
                </ul>
            </div>

更少

.filters {
    cursor: pointer;
    padding-bottom: 30px;

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;

        li {
            display: inline-block;
            padding-right: 15px;
            color: #717171;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;

            &:last-child { padding-right: 0; }

            &:hover {
                color: #424141;
            }

            &:active {
                color: #424141;
            }
        }
    }
}

编辑

github 页面上的工作站点 - https://onehunnid.github.io/psb/

repo - https://github.com/OneHunnid/psb

Answer 1

问题不在于特异性。你的 LESS 写错了。而不是

&:active {
    color: #424141;
}

你可能想要

&.active {
    color: #424141;
}

那是因为您正在添加一个类，而不是依赖于链接 :active状态(无论如何，仅对 <a> 标签有效)