Simple Tabs

A simple Tabs using jQuery and tittle bit of CSS style

HTML

<h1>Simple Tabs</h1>
    <ul id="tabs">
        <li><a href="#java">Java</a></li>
        <li><a href="#php">PHP</a></li>
        <li><a href="#python">Python</a></li>
        <li><a href="#ruby">Ruby</a></li>
        <li><a href="#perl">Perl</a></li>
    </ul>

    <div id="java" class="tab-section">
        <h2>Overview</h2>
        <p>
        Java is a general-purpose, concurrent, class-based, object-oriented computer programming language that is specifically designed to have as few implementation dependencies as possible. It is intended to let application developers "write once, run anywhere" (WORA), meaning that code that runs on one platform does not need to be recompiled to run on another. Java applications are typically compiled to bytecode (class file) that can run on any Java virtual machine (JVM) regardless of computer architecture.
        </p>
    </div>
    
    <div id="php" class="tab-section">
        <h2>Documentation</h2>
        <p>
        The PHP Manual is available online in a selection of languages. Please pick a language from the list below.
        </p>
        <p>
        You can learn how to integrate our online manual with various tools, including your web browser, on our quick reference tips page. You can also get more information about php.net URL shortcuts by visiting our URL how to page.
        </p>       
    </div>
    <div id="python" class="tab-section">
        <h2>About Python</h2>
        <p>
        Python is a remarkably powerful dynamic programming language that is used in a wide variety of application domains. Python is often compared to Tcl, Perl, Ruby, Scheme or Java. Some of its key distinguishing features.    
        </p>
    </div>

    <div id="ruby" class="tab-section">
        <h2>Getting Started</h2>
        <p>
        <h3>Try Ruby!</h3>
        An interactive tutorial that lets you try out Ruby right in your browser. This 15-minute tutorial is aimed at beginners who want to get a feeling of the language.
 ...

JavaScript

$(function(){
	$('.tab-section').hide();
	$('#tabs a').bind('click', function(e){
		$('#tabs a.current').removeClass('current');
		$('.tab-section:visible').hide();
		$(this.hash).show();
		$(this).addClass('current');
		e.preventDefault();
	}).filter(':first').click();
});