There’s a new version of this article: Multiple Rotating jQuery Tabs. featuring automatic rotation of the tabs, highlighting of the selected tab title and supports multiple tab panels.
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
//change tab and highlight current tab title
//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();
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.
//call change to display next tab
//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.
//store all tabs in array
tabs[ind++] = jQuery(this).attr(‘id’);
//set index to next element to fade
ind = 1;
//initialize tabs, display the current tab
//highlight the current tab title
jQuery(‘#’ + tabs + ‘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.
//handler for clicking on tabs
//if tab is clicked, stop rotating
clearInterval(inter); //store reference to clicked tab
stringref = jQuery(this).attr(‘href’).split(‘#’);
//display referenced tab
//start rotating tabs
inter = setInterval(‘next()’, 1000);