jQuery UI Tabs Example

A simple example showing how to use jQuery UI's tabs

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
<body onload="init()">

<div class = "tabContent" id = "about" onclick="showTab()">
   <div class = "contentText" id = "aboutContent">
    <p>The code is written in such a way that the page degrades gracefully in browsers that don't support JavaScript or CSS.</p>
  </div>
  
  <div class = "contentPicture" id = "aboutPicture">
	<p>JavaScript tabs partition your Web page content into tabbed sections. Only one section at a time is visible.</p>
  </div>
</div>

<div class="tabContent" id="advantages" onclick="showTab()">
  <div>
    <p>Advantages of tabs</p>    
  </div>
</div>

<div class="tabContent" id="usage" onclick="showTab()">
  <div>
    <p>usage of tabs</p>
	<p>Content Line 2</p>
  </div>
</div>

<ul id="tabs">
  <li class='on'><a href="#about">About JavaScript tabs</a></li>
  <li><a href="#advantages">Advantages of tabs</a></li>
  <li><a href="#usage">Using tabs</a></li>
</ul>

</body>
</html>

CSS

body 
{ 
 font-size: 80%;
 font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; 
}
 
ul#tabs 
{ list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }

ul#tabs li { display: inline; }

ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }

ul#tabs li a:hover { background-color: #f1f0ee; }

ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }

ul#tabs li.on { background: #f90; color: #fff; }

div.tabContent.fadeIn(10);
{ 
 border: 1px solid #c9c3ba;
 padding: 0.5em; 
 background-color: #f1f0ee; 
 
}

/*div.contentText
{
	float: left;
    background: red;
    width: 300px;
}

div.contentPicture
{
	background: blue;
    /*width: 40%;*/
	/*left: 305px;
	
}*/

div.tabContent.hide 
{
 display: none; 
}

JavaScript

function init() {
    // Grab the tab links and content divs from the page
    var tabListItems = $('#tabs li');

    // loop through all tab li tags
    $('#tabs li').each(function (i, ele) {
        // Assign click/focus events to the tab anchor/links
        var tabLink = $(this).find('a').on('click', showTab).on('focus', function () { $(this).blur(); });
        var tabBody = $($(tabLink).attr('href'));

        // highlight the first tab
        if (i == 0) $(tabLink).addClass('selected');

        // hide all the content divs but the first
        if (i != 0) $(tabBody).hide();
    });

    //auto-rotate every 4 seconds
    setInterval(function () {
        var selectedTab = $('#tabs').find('li.on');
        var index = $(selectedTab).index();

        if (index < $('#tabs').find('li').length - 1)
            index++;
        else
            index = 0;

        $('#tabs').find('li:eq(' + index + ') a').click();
    }, 4000);
}
function showTab(e) {
    // prevent default anchor/link action
    e.preventDefault();

    var selectedId = $(this).attr('href');

    // remove 'on' class from all tab li tags
    $('#tabs').find('li').removeClass('on');

    // remove 'selected' class from all tab anchors/links
    $('#tabs').find('a.selected').removeClass('selected');

    // add 'on' class to selected tab li tag
    $(this).closest('li').addClass('on');

    // add selected class 
    $(this).addClass('selected');

    // hide all tab bodies
    $('div.tabContent').hide();

    // show selected tab body
    $(selectedId).show();
}