Javascript 根据url将项目设置为活动

我的内容区域顶部有几个链接。 他们应该根据url获取

活动的
类

例如：
如果URL为
/Products/Materials/Glass
则
Glass
链接应处于活动状态

基本上，这适用于我的实际代码，但它也将
all
链接设置为活动状态，仅当url为例如
/Products/Materials
时，该链接才应处于活动状态。请注意
/Products
更改后的值

截图：


这是我的代码：

HTML:

您可以为“全部”链接输入特定的if：


函数setItemActive（路径）{
//var path=window.location.pathname；
路径=路径。替换（/\/$/，“”）；
路径=解码组件（路径）；
$（'.js子类别链接'）。每个（函数（）{
var href=$（this.attr（'href'）；
if（（this.id==“alle link”&&path.match（//\//g）.length
当您单击菜单中的列表项时，该列表项的索引将被存储，然后保存在会话存储中。当页面刷新时，检索到该列表项，然后将活动类添加到该列表项索引中。将页面显示为活动。这解决了问题，因为它在加载页面后添加了活动类，从而实际将其显示为ac但是，上面的答案不会这样做。
我认为在将活动类添加到任何div之前，您应该删除活动类。这样可以解决您的问题

    function setItemActive(){
        var path = window.location.pathname;

        path = path.replace(/\/$/, "");
        path = decodeURIComponent(path);


        $('.js-subcategory-link').each(function(){
            var href = $(this).attr('href');

            if(path.substring(0,href.length) === href){
                $('.js-subcategory-link').removeClass('category-filter-item-active'); 
// It removes active class from all divs then it assigns to particular div
                $(this).closest('div').addClass('category-filter-item-active');
                $(this).children('.arrow').addClass('arrow-category');
            }
        })
    }

这个
category filter item active
类是否将div设置为active？是的，category filter item active将div设置为active这不适用于人们直接访问某个子部分页面的情况。您是否可以添加到该子部分页面以捕获该子部分？但是，您将再次检查url，因此您也可以在源页面中执行此操作Alwayi在我的问题中犯了一个小错误，当用户在产品之后1级时，“所有”链接应该是活动的。因此它是/products/Category/Subcategory。链接只显示在/Category部分。所以棘手的是/products之后的URL是变化的，这取决于用户选择的类别。我希望能解释一下好的^^你能给你的所有链接添加一个id吗？如果是这样的话，我会这样做。如果你有多个所有链接，那么你可以为它们使用一个唯一的类，并使用
hasClass（）
来检查，而不是ifiesss中的
this.id===
。现在它工作了！：D非常感谢你两次为我节省了一天的时间！现在我可以安息了哈哈；-）哈哈哈，很好：）
function setItemActive(){
    var path = window.location.pathname;

    path = path.replace(/\/$/, "");
    path = decodeURIComponent(path);


    $('.js-subcategory-link').each(function(){
        var href = $(this).attr('href');

        if(path.substring(0,href.length) === href){
            $(this).closest('div').addClass('category-filter-item-active');
            $(this).children('.arrow').addClass('arrow-category');
        }
    })
}

    var storedListItem = sessionStorage.getItem('selectedListItem');
    $("ul.nav > li > a:eq("+(storedListItem)+")").addClass("active");
    $("ul.nav > li").on("click",function(){
        var index = $(this).index('ul.nav > li');
        var selectedListItem = index;
        sessionStorage.setItem('selectedListItem', JSON.stringify(selectedListItem));
    });

    function setItemActive(){
        var path = window.location.pathname;

        path = path.replace(/\/$/, "");
        path = decodeURIComponent(path);


        $('.js-subcategory-link').each(function(){
            var href = $(this).attr('href');

            if(path.substring(0,href.length) === href){
                $('.js-subcategory-link').removeClass('category-filter-item-active'); 
// It removes active class from all divs then it assigns to particular div
                $(this).closest('div').addClass('category-filter-item-active');
                $(this).children('.arrow').addClass('arrow-category');
            }
        })
    }