the rotating tabs, we also need to take care of the behaviour when the user actually clicks on a tab by stopping the cycling behaviour on the desired tab. Finally, we will also highlight the selected tab both in the cycling mode and when the user clicks on a tab.

You might want to have a look at the rotating jQuery tabs first. Every second, the current tab fades out and the next one fades in. Click on a tab title and it will display that tab stopping the cycling.

After initializing some variables, we will define one function that will be used for changing the tabs and highlight the title. This function will be called by the CLICK event and also from the cycling or rotating system. For the selection, I used a technique from a previous article about jQuery selection and revealing. Whenever a new tab is displayed, we will remove the .select class from the other tabs and apply to to the current one, thus highlighting the title of the current tab.

//array to store IDs of our tabs
var tabs = [];
//index for array
var ind = 0;
//store setInterval reference
var inter;
 
//change tab and highlight current tab title
function change(stringref){
  //hide the other tabs
  jQuery('.tab:not(#' + stringref + ')').hide();
  //show proper tab, catch IE6 bug
  if (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == "6.0")
    jQuery('.tab#' + stringref).show();
  else
    jQuery('.tab#' + stringref).fadeIn();
  //clear highlight from previous tab title
  jQuery('.htabs a:not(#' + stringref + 't)').removeClass('select');
  //highlight current tab title
  jQuery('.htabs a[href=#' + stringref + ']').addClass('select');
}

The next function will be called at a regular interval and it’s what will fade out the previous tab and fade in the next tab.

function next(){
  //call change to display next tab
  change(tabs[ind++]);
  //if it's the last tab, clear the index
  if(ind >= tabs.length)
  ind = 0;
}

Now, the following block is the first thing that will be executed when the page is ready. We need to store a reference to all of our tabs in an array to iterate it. We will use the map function from jQuery to walk through the elements: each time we found a new element, we will store its reference into an array. After the map iteration, the ind variable, the array index, is set to 1 so when change is called, the number used will be 1, thus displaying the next tab. If it was 0 the next element displayed would have been the same tab.

jQuery(document).ready(function(){
  //store all tabs in array
  jQuery(".tab").map(function(){
    tabs[ind++] = jQuery(this).attr("id");
  })
  //set index to next element to fade
  ind = 1;
  //initialize tabs, display the current tab
  jQuery(".tab:not(:first)").hide();
  jQuery(".tab:first").show();
  //highlight the current tab title
  jQuery('#' + tabs[0] + 't').addClass('select');

The following snippet contains the behavioural logic. If we click on a tab title, we will clear the rotating behaviour by clearing the reference to the interval we have defined, inter (this is defined in the last lines of the code). We will store the reference in a variable stringref and call change. The last two lines set the next function to be repeated at an interval of 1000 (merely for testing purposes), which is one second, so if you want to rotate the tabs every 4 seconds you should add 4000. The setInterval function returns a reference that we will be storing and is the one we used to clear the interval when the user clicks on a tab.The following snippet contains the behavioural logic. If we click on a tab title, we will clear the rotating behaviour by clearing the reference to the interval we have defined, inter (this is defined in the last lines of the code). We will store the reference in a variable stringref and call change. The last two lines set the next function to be repeated at an interval of 1000 (merely for testing purposes), which is one second, so if you want to rotate the tabs every 4 seconds you should add 4000. The setInterval function returns a reference that we will be storing and is the one we used to clear the interval when the user clicks on a tab.

//handler for clicking on tabs
jQuery(".htabs a").click(function(){
  //if tab is clicked, stop rotating
  clearInterval(inter); //store reference to clicked tab
  stringref = jQuery(this).attr("href").split('#')[1];
  //display referenced tab
  change(stringref);
  return false;
});
//start rotating tabs
inter = setInterval("next()", 1000);
});