CODEWITHSUNDEEP
javascriptjqueryhtml
StaXter
StaXter

Reputation: 211

Set item active depending on url

I have got several links on the top of my content area. They should get the active class based on the url.

For example: If the URL is /Products/Materials/Glass the Glass link should be active.

Basically this works with my actual code but it also sets the all link active, which should only be active when the url is for example /Products/Materials. Notice the value after /Products changes

Screenshot: enter image description here

enter image description here

Here is my Code:

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

Upvotes: 1

Views: 386

Answers (3)

Pete
Pete

Reputation: 58432

You could put a specific if in for the all link:

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>

Upvotes: 1

Komal K.
Komal K.

Reputation: 480

I think you should remove active class before adding active class to any div. So it will resolve you problem.

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

Upvotes: 0

user6685907
user6685907

Reputation: 

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

When you click a list item in the menu the index of that list item is stored, it is then saved in session storage. One the page refreshes it is retrieved then the active class is added to that item index. Showing the page as active. It resolves the question because it adds the active class after the page is loaded thus actually showing it as active, the answers above would not do that.

Upvotes: 0

Related Questions