Back to Top

How to create an active tab effect in jQuery?

Active Menu using jquery in Wordpress

WordPress is an open source content management system based on PHP and MySQL.It’s easy and fast to develop the site using WordPress.

Today I am going to share how to create an active tab effect in a navigation bar by fetching the # from the URL. This is used when we are developing one-page layout theme for WordPress and want to make the menu as active when its clicked and scroll down to that menu.

Well, It’s pretty simple to make navigation bar active, when you are linking to the different page, But it’s quite difficult for the same page.Here I have used jQuery code to fulfil that purpose.

Let’s see the following code which is used to make navigation active on the same page.

window.location.hash return the value starts from # in the URL.Here In above code setTimeout is used to execute a function after a link is it make current link active.

Or if you have used jQuery Scroll for page scrolling which gives smooth scrolling effect to the page.then you can use following code to add active class into it.

Thank you for reading, good luck and let me know if you run into any problems & I’ll help as much as I can 🙂

Hope this post will helpful for you, waiting for your responses.Thanks for reading and feel free to share your thoughts! Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

Five Reasons Why You Should Go With PHP

Posted on 5 years ago


MySQL FULLTEXT Index and Search

Posted on 3 years ago


Django Tutorial for beginners

Posted on 2 years ago


JQuery Animation effects

Posted on 6 years ago