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.

$('.menu a').click(function () {
 setTimeOut(function(){
    var loc_hash = window.location.hash;
    $('.menu a').each(function () {
       if (loc_hash == $(this).attr('href')) {              
        //To remove class from all other menus
        $('.menu a').removeClass('active');
        //To add class into the selected menu
        $(this).addClass('active');
       }
    });
}, 500);
});

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 clicked.so 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.

$(function() {
     $('.menu a').bind('click',function(event){
         var $anchor = $(this);
         $('html, body').stop().animate({                       
					scrollLeft: $($anchor.attr('href')).offset().left
                     }, 1000);
        //To remove class from all other menus
        $('.menu a').removeClass('active');
        //To add class into the selected menu
        $(this).addClass('active');
                    event.preventDefault();
         });
   });

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

Warning :Cannot find Joomla XML Setup file

Posted on 6 years ago

Bhumi

To parse CSV Data in PHP

Posted on 7 years ago

Bhumi

How to Protect file using .htaccess

Posted on 3 years ago

Bhumi

What is Predefined Interface in PHP

Posted on 3 years ago

Bhumi

Hello world

Updated 5 days ago

Nick Carter

In depth Understanding of Laravel Core

Updated 2 months ago

Bhumi

ECMAScript 6 New Features – 2

Updated 1 year ago

Bhumi

The Reader’s Poll – June 2015

Posted on 4 years ago

Bhumi

The Reader’s Poll – August 2014

Posted on 4 years ago

Bhumi

The Reader’s Poll – June 2014

Posted on 5 years ago

Bhumi

The Readers’ Poll – May 2014

Posted on 5 years ago

Bhumi

The Readers’ Poll – August 2013

Posted on 5 years ago

Bhumi