jQuery Tabs with auto-switching capability

Question

I don’t quite understand javascript, but managed to have a tabbed area thanks to google god.

When the tab button is clicked, corresponding contents are displayed. I wish to add one more function as below.

• Even if no tab button is clicked, switch to the next tab every 5 seconds.
• If current active tab is Tab 4 and 5 seconds have passed, switch back to Tab 1.

Below is my current code.

/* CSS for Tabs */

.tabs { list-style: none; margin-top: 30px; }
.tabs li { display: inline; }
.tabs li a { min-width: 20%; color: black; float: left; display: block; padding: 1%; margin-left: 1%; margin-right: 1%; position: relative; text-decoration: none; text-align: center; border-top: 1px solid #333; border-bottom: 1px solid #333; }
.tabs li a:hover { font-weight: bold; background: #fff; border-top: 1px solid #333; border-bottom: 1px solid #333; }
.tabs li a:active { font-weight: bold; background: #fff; border-top: 1px solid #333; border-bottom: 1px solid #333; }

/* HTML */

<div id="tabs">
    <ul class="tabs" id="tabsnav">
        <li><a href="#tab-1" class="menu-internal">Tab 1</a></li>
        <li><a href="#tab-2" class="menu-internal">Tab 2</a></li>
        <li><a href="#tab-3" class="menu-internal">Tab 3</a></li>
        <li><a href="#tab-4" class="menu-internal">Tab 4</a></li>
    </ul>

    <div id="tab-1">
        Contents for tab 1
    </div>
    <div id="tab-2">
        Contents for tab 2 
    </div>
    <div id="tab-3">
        Contents for tab 3
    </div>
    <div id="tab-4">
        Contents for tab 4  
    </div>
</div>

/* JAVA */

<script>
jQuery(document).ready(function() {
    jQuery('#tabs > div').hide(); // hide all child divs
    jQuery('#tabs div:first').show(); // show first child div
    jQuery('#tabsnav li:first').addClass('active');

    jQuery('.menu-internal').click(function(){
    jQuery('#tabsnav li').removeClass('active');
    var currentTab = jQuery(this).attr('href');
    jQuery('#tabsnav li a[href="'+currentTab+'"]').parent().addClass('active');
    jQuery('#tabs > div').hide();
    jQuery(currentTab).show();
    return false;
    });
    // Create a bookmarkable tab link
    hash = window.location.hash;
    elements = jQuery('a[href="'+hash+'"]'); // look for tabs that match the hash
    if (elements.length === 0) { // if there aren't any, then
    jQuery("ul.tabs li:first").addClass("active").show(); // show the first tab
    } else { elements.click(); } // else, open the tab in the hash
});
</script> 

I guess I need to add more codes to the above script, such as “go to the next tab after 5 seconds, and go back to tab 1 after tab 4”. However, I don’t know how to programming and at a loss.

A professional help will be highly appreciated.

Thank you.

Answer 1

Try this

DEMO

This one is pretty much what you want.

Add your own css to it

HTML :

 <div id="tabs">
<ul class="tabs" id="tabsnav">
    <li><a href="#tab-1" class="menu-internal">Tab 1</a></li>
    <li><a href="#tab-2" class="menu-internal">Tab 2</a></li>
    <li><a href="#tab-3" class="menu-internal">Tab 3</a></li>
    <li><a href="#tab-4" class="menu-internal">Tab 4</a></li>
</ul>

<div id="tab-1">
    Contents for tab 1
</div>
<div id="tab-2">
    Contents for tab 2 
</div>
<div id="tab-3">
    Contents for tab 3
</div>
<div id="tab-4">
    Contents for tab 4  
</div>
</div>

JAVASCRIPT:

jQuery(document).ready(function() {
jQuery('#tabs > div').hide(); // hide all child divs
jQuery('#tabs div:first').show(); // show first child div
jQuery('#tabsnav li:first').addClass('active');

jQuery('.menu-internal').click(function(){
jQuery('#tabsnav li').removeClass('active');
var currentTab = jQuery(this).attr('href');
jQuery('#tabsnav li a[href="'+currentTab+'"]').parent().addClass('active');
jQuery('#tabs > div').hide();
jQuery(currentTab).show();
return false;
});
// Create a bookmarkable tab link
hash = window.location.hash;
elements = jQuery('a[href="'+hash+'"]'); // look for tabs that match the hash
if (elements.length === 0) { // if there aren't any, then
jQuery("ul.tabs li:first").addClass("active").show(); // show the first tab
} else { elements.click(); } // else, open the tab in the hash
});

Hope this helps