0

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!

2 Answers 2

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.

0
1
location.href

Will return the URL of the current page, so you could change your if statment to something like -

if (location.href.indexOf(contentLocation) != -1) {

Which will check to see if the link of the clicked href is contained in the current page's URL. You'd obviously have to change this logic to suit your own needs.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.