use the active CSS class on the current url

Question

In my php web project, I want to add a CSS class (.active) to the current url route when the user clicks on the navigation menu bar, i.e. my navigation menu.

<li><a href="http://localhost:8000/OhdyDaran')">Designation</a></li>
<li><a href="http://localhost:8000/gallery">Gallery</a></li>
<li><a href="http://localhost:8000/Introduction">introduction</a></li>
<li><a href="http://localhost:8000/home">Home</a></li>

How to Make an Application.active CSS class with Jquery or JS, after page refresh, is the link css applied?

Gaurang Ghinaiya · Accepted Answer · 2015-09-12 11:19:23Z

4

Try this.

$(document).ready(function () {
   var link = window.location.href.split('/');
   var page = link[link.length - 1];
   var url = link[link.length - 2];

   // now select the link based on the address
   $('li > a[href="'url + '/' + page + '"]').closest('li').addClass('active');
            })

answered Sep 12, 2015 at 11:19

Gaurang Ghinaiya

5699 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

saeed ahmed Over a year ago

thanks to reply, its working fine, problem another here, after page refresh active class disappear ? how fix it

Gaurang Ghinaiya Over a year ago

@saeedahmed it working perfectly after page refresh.

saeed ahmed Over a year ago

I check it again, when I click on anchore tag class is applied. the page go to server side after response it disappeared again

saeed ahmed Over a year ago

$(function(){ $('.nav a').filter(function(){ return this.href==location.href}).parent().addClass('active').siblings().removeClass('active') $('.nav a').click(function() { $(this).parent().addClass('active').siblings().removeClass('active') }) });

saeed ahmed Over a year ago

thanks above code that I pasted here is working perfectly :)

Kakar · Accepted Answer · 2015-09-12 11:20:40Z

2

You can get the url or path in this way:

var pathname = window.location.pathname; // Returns path only
var url      = window.location.href;     // Returns full URL

And then, if the url or path is the same as the link, give it the .active class.

answered Sep 12, 2015 at 11:20

Kakar

5,62911 gold badges64 silver badges94 bronze badges

1 Comment

saeed ahmed Over a year ago

plz write complete code, there is confusion what u want to say ?

Manoj Patidar · Accepted Answer · 2019-07-05 08:26:26Z

1

<li class="ohdyDaran">
    <a href="http://localhost:8000/ohdyDaran')">Designation</a>
</li>
<li class="gallery">
    <a href="http://localhost:8000/gallery">Gallery</a>
</li>
<li class="introduction">
    <a href="http://localhost:8000/introduction">introduction</a>
</li>
<li class="home">
    <a href="http://localhost:8000/home">Home</a>
</li>

<script>
var url = window.location.href;
    var last = url.split('/');
    var clas= last[last.length-1];
    var nav = document.getElementsByClassName(clas)[0];
    nav.className = "active";
</script>

answered Jul 5, 2019 at 8:26

Manoj Patidar

112 bronze badges

Collectives™ on Stack Overflow

use the active CSS class on the current url

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related