Question

I have seen numerous ways to highlight the current tab, but they all have been with separate html pages where as I am not using different pages such as about.html, services.html etc.

I am currently using divs with the information I need, and whenever I click the ‘about’ tab a div will show with the about information. But I’m not sure of a way to highlight the tab.

Here is what I have as the html in the body:

<div id="wrapper">
<ul><li><a href="Javascript:ShowContent('about');
                 Javascript:HideContent('graph')"
                 class="about"></a></li>

    <div class="portfolio"><a class="portfolio"><span>Portfolio</span></a></div>

    <div class="accordionContent">
            <a href="Javascript:HideContent('about');
                     Javascript:ShowContent('graph')"
                class="graph"></a>
    </div>
</ul>

The menu uses background graphics so I want to replace the original graphic with another. Also, as you can see I am using a accordion menu too. I’m not sure how much it will effect end code but I thought I should include that.

Answer 1

$(".tabHeader").click(function() {
    $(".selectedHeader").removeClass("selectedHeader");
    $(this).addClass("selectedHeader");
    // Do your other stuff to show the correct tab.
});

Your css rules for .selectedHeader can change color, background-image, etc.