Question

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

过滤器工作得很好，但我试图让它在用户点击过滤器时显示活动类。我的setActive（）函数分别用于将活动类添加到项目中，但是由于特殊性，活动类不起作用。

我也在使用LESS，并希望了解更好的方法来添加＆amp;：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>

LESS

.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/

回购 - https://github.com/OneHunnid/psb

Answer 1

问题不是特异性。你错误地写了你的LESS。而不是

&:active {
    color: #424141;
}

你可能想要

&.active {
    color: #424141;
}

这是因为您正在添加一个类，而不是依赖于链接:active状态（仅对<a>个标签有效）

由于特异性，使用jQuery添加“active”类不起作用

1 个答案: