CODEWITHSUNDEEP
javascripthtmlcssnav
Matt
Matt

Reputation: 1923

Change class when page is active

How can I set a .html page active when I change pages? This is needed to change the active tab in my nav bar. I should add the class .current_page_item to the active li of the nav.

I've searched a bit around, but I couldn't find a fitting answer.

Upvotes: 0

Views: 2233

Answers (1)

iConnor
iConnor

Reputation: 20189

this is what you need with jquery

   <script>
   $(document).ready(function(){

       var links = $('nav').children();
       $.each(links, function(key, value){
          if(value.href == document.URL){
           $(this).addClass('current_page_item');
          }
       });
   </script>
    <nav>
        <a href="/link1">link-1</a>
        <a href="/link2">link-2</a>
        <a href="/link3">link-3</a>
        <a href="/link4">link-4</a>
        <a href="index.html">link-5</a>
    </nav>

Link 5 will get the active class because its the same as the current url

The Result

<nav>
    <a href="/link1">link-1</a>
    <a href="/link2">link-2</a>
    <a href="/link3">link-3</a>
    <a href="/link4">link-4</a>
    <a class="current_page_item" href="index.html">link-5</a>
</nav>

Upvotes: 3

Related Questions