Question

经过广泛的研究，我找不到任何完美无缺的东西。

我的HTML

<div class="option" data-toggle="tooltip" data-placement="right" data-name="Home" data-url="/" title="Home">
    <p class="select-button"><i class="fa fa-home" aria-hidden="true"></i></p>
</div>

我的JS

$(function(){
    activeClass();
});

function activeClass(){
    //define the page url
    var path = window.location.pathname;
    path = path.replace(/\/$/, "");
    //decode the uri
    path = decodeURIComponent(path);

    //find each item containing .option as a class
    $(".option").each(function() {
        //store the data of these in a variable
        var ref = $(this).data("url"); 
        if(path.substring(0,ref.length) == ref){
            //set the closest one to active
            $(this).addClass('active');
        }
    })  
}

JS可以正常工作，但它也会使主页按钮在URL中/的页面上具有活动类，但不在主页上。

目的是让网页检测或确定与网页网址相匹配的按钮。例如，主页将与我提供的按钮代码匹配，或者/ auth / login将与登录按钮匹配。

Answer 1

最后归结为字符串比较。如果你根据它们的开头比较这些字符串，如果两个或多个路由以相同的字符序列开头，你会遇到麻烦，但是一个比另一个短。＆＃34; /＆＃34;就是这种情况。作为主页，也是每个其他网址的第一个字符。

如果您不希望在.option s中出现此类“冲突”网址（＆＃34; /＆＃34;除外），那么您可以在家中创建一个简单的例外url，如下例所示。

$(function () {
    // Immediate function
    !function () {
        var path = window.location.pathname;
        // Changed regex to not replace single "/"
        path = path.replace(/.+\/$/, "");
        path = decodeURIComponent(path);

        // Exception if path is "/"
        if (path === '/') {
            $('[data-url="/"]').addClass('active');
            return;
        }

        // Check all `.options` but not `[data-url="/"]`
        $('[data-url]:not([data-url="/"])').each(function() {
            var ref = $(this).data('url');

            if (path.indexOf(ref) === 0) {
                $(this).addClass('active');
            }
        })  
    }()
});

jQuery，根据data属性设置活动类

1 个答案: