Question

There are many tutorials that show you how to create an active tab effect in a navigation bar by fetching the # from the url.

This is great if you are linking to the same page, but what if all your links are on different pages. Is there a way using Jquery to fetch the url and make the tab active?

The following example gives the specific tab a class “active”:

var tabs = $('ul.tabs');

    tabs.each(function(i) {
        //Get all tabs
        var tab = $(this).find('> li > a');
        tab.click(function(e) {

            //Get Location of tab's content
            var contentLocation = $(this).attr('href') + "Tab";

            //Let go if not a hashed one
            if(contentLocation.charAt(0)=="#") {

                e.preventDefault();

                //Make Tab Active
                tab.removeClass('active');
                $(this).addClass('active');

                //Show Tab Content & add active class
                $(contentLocation).show().addClass('active').siblings().hide().removeClass('active');

            } 
        });

How do I modify this to work with links to other pages within my site? Here is the html:

<ul id="nav"  class="tabs">
    <li><a href="/" title="Home" class="active">Home</a></li>   
    <li><a href="/about/" title="About us">About</a></li>
    <li><a href="/demo/" title="Demo">Demo</a></li>
    <li><a href="/where/" class="dir" title="Where">Where</a></li>
    <li><a href="/contact/" class="dir" title="Contact Us">Contact Us</a></li>
</ul>

The above jquery only works for #tab1, #tab2 etc, how do I make the tab active depending on the current page name? Sorry if this is a little unclear, it’s quite hard to explain!

Answer 1

On the load of the page you can check the ‘window.location’ object for what page is being displayed, and then set the ‘active’ class to the corresponding link:

$(document).ready(function () {
    //iterate through your links and see if they are found in the window.location.pathname string
    var loc_href = window.location.pathname;
    $('#nav a').each(function () {
        if (loc_href == $(this).attr('href')) {
            $(this).addClass('active');
        }
    });
});

NOTE: that the loc == $(this).attr(‘href’) line looks to see if the href values for the links exactly match the window.location.pathname string.