Question

我的内容区域顶部有几个链接。他们应该根据网址获得active课程。

例如：如果网址为/Products/Materials/Glass，则Glass链接应处于有效状态。

基本上这适用于我的实际代码，但它也会将all链接设置为活动状态，只有当网址为/Products/Materials时，该链接才有效。请注意/Products更改后的值

截图：

这是我的代码：

HTML：

<div class="row">
    <div class="category-filter-item">
        <a class="js-subcategory-link subcategory-link">
            <span>All<span>
            <div class="arrow"></div>
        </a>
    </div>
    <div class="category-filter-item">
        <a class="js-subcategory-link subcategory-link">
            <span>Wood<span>
            <div class="arrow"></div>
        </a>
    </div>
    <div class="category-filter-item">
        <a class="js-subcategory-link subcategory-link">
            <span>Glass<span>
            <div class="arrow"></div>
        </a>
    </div>
    <div class="category-filter-item">
        <a class="js-subcategory-link subcategory-link">
            <span>Metal<span>
            <div class="arrow"></div>
        </a>
    </div>
    <div class="category-filter-item">
        <a class="js-subcategory-link subcategory-link">
            <span>Concrete<span>
            <div class="arrow"></div>
        </a>
    </div>
    <div class="category-filter-item">
        <a class="js-subcategory-link subcategory-link">
            <span>Stone<span>
            <div class="arrow"></div>
        </a>
    </div>
</div>

JavaScript的：

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');
        }
    })
}

Answer 1

您可以为所有链接输入特定的if：

function setItemActive(path) {
  // var path = window.location.pathname;

  path = path.replace(/\/$/, "");
  path = decodeURIComponent(path);


  $('.js-subcategory-link').each(function() {
    var href = $(this).attr('href');

    if ((this.id === "alle-link" && path.match(/\//g).length <= 2) || 
    (this.id !== "alle-link" && path.startsWith(href)))
    {
      $(this).closest('div').addClass('category-filter-item-active');
      $(this).children('.arrow').addClass('arrow-category');
    }

  });
}

setItemActive('/Product/category/subcategory-1');

.category-filter-item-active {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><a href="/Product" class="js-subcategory-link" id="alle-link">All</a></div>
<div><a href="/Product/category/subcategory-1" class="js-subcategory-link">subcategory 1</a></div>
<div><a href="/Product/category/subcategory-2" class="js-subcategory-link">subcategory 2</a></div>
<div><a href="/Product/category/subcategory-3" class="js-subcategory-link">subcategory 3</a></div>
<div><a href="/Product/category/subcategory-4" class="js-subcategory-link">subcategory 4</a></div>
<div><a href="/Product/category/subcategory-5" class="js-subcategory-link">subcategory 5</a></div>

Answer 2

    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));
    });

当您单击菜单中的列表项时，将存储该列表项的索引，然后将其保存在会话存储中。一个页面刷新它被检索然后活动类被添加到该项目索引。将页面显示为活动状态。它解决了这个问题，因为它在页面加载后添加了活动类，因此实际上将其显示为活动状态，上面的答案不会这样做。

Answer 3

我认为你应该在将活动类添加到任何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');
            }
        })
    }

根据网址设置项目是否有效

3 个答案: