Friday, 29 August 2014

How to add an active class in navigation menu item in website?

How to add an active class in navigation menu item in website?

Generally active class show which page /link you are visiting currently. Active class will be added in css class, but the problem is only one item can have active class at one time. But we need to show active class dynamically.

In generally we work with master page and common menu items. So we need dynamic way to apply active class on menu item.
So do you think to solve this issue C# coding is worth? Better option is to do with java script and a jquery min library file.
To do this first create an active class in css file:

And put below java script code in master page.
            $(function () {
                var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
                $(".menu ul li a").each(function () {
                    if ($(this).attr("href") == pgurl || $(this).attr("href") == )

If you face any issue, put an alert and check the value you are getting and then manipulate the code as per your need.

Do’t forget to link jquery.min.js or any other jquery min file, which you can get easily.

Please like us on FB if this article is helpful for you.

No comments:

Post a Comment

Dear Readers, Please post your valuable feedback in the comment section if you like this blog or if you have any suggestions. I would love to hear the same from you. Thanks