Question

I need to highlight the tab which is for the current page with jquery. A simple task usually with a few lines of code I know. However, the tab is not your usual thing as I have a toolbar and have done it with spans. The span for the tab is inside the link so that the tab can be clicked as well as the text inside it. Since I only have two tabs that are links on the toolbar I was thinking of using an if else statement in jquery to determine which page the user is on and therefore which tab to highlight but i am not too sure how to do that.

The markup for the tabs is;

 <a href="Home">
     <span class="navButton" title="Return Home">
         Home
     </span>
 </a>
 <a href="Discover">
     <span class="navButton" title="Discover The Unsigned">
          Discover
     </span>
 </a>

The jquery I have at the moment that doesnt work is;

 $(function(){
     var path = location.pathname.substring(1);
     if ( path )
     $('#navButton a[href$="' + path + '"]').css ('box-shadow', 'inset 0 0 10px #000000');
 });

Note: I will be adding the css style rather than a class as it will keep other things simpler.

Answer 1

Why don’t you want to change style onClick()? Like that:

$("#navButton a").click(function() {
    $(this).css('box-shadow', 'inset 0 0 10px #000000');
});

Or even better, you can create CSS class:

.activeTab {box-shadow: inset 0 0 10px #000000;}

And then add / remove it, depending on currently active tab:

$("#navButton a").click(function() {
    $(".activeTab").removeClass("activeTab");
    $(this).addClass("activeTab");
});

---

Based on location:

$(function() {
    var url = window.location.path;
    $('$navButton a[href="' + url + '"]').addClass("activeTab");
});

And then your links should look like:

<a href="'/someDirectory/one.html'">One</a>
<a href="'/someDirectory/two.html'">Two</a>