• Introduction
• Html
• CSS
• JavaScript

JavaScript (jQuery)

In this example, I am using jQuery to add the 'selected' CSS style to the appropriate li. This is based upon a comparison of the current page's URL to the HREF of the li's anchor tag.

$(document).ready(function () {
   var location = window.location;
   var found = false;
   $("#tab-container a").each(function(){
      var href = $(this).attr("href");
      if(href==location){
         $(this).parent().addClass("selected");
         found = true;
      }
   });
   if(!found){
      $("#tab-container li:first").addClass("selected");
   }
});