frenetic.be
simply beautiful.
In this post, we will make some simple and nice looking tabs. Here's the final product: nice, functional and simple tabs.
  • Tab1
  • Tab2
  • Tab3
  • Tab4
some content from Tab 1

some more content

blah blah blah
some other content from Tab 2

some more content

blah blah blah
some content here from Tab 3

some more content

blah blah blah
some content from Tab 4

some more content

blah blah blah
In order to do that, we will be using jQuery (of course, this can be done in pure JavaScript but it's easier with jQuery), so be sure to add the following line inside your html head tag.
<!DOCTYPE html>
<html lang="en">
<head>
...
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
...
</head>
Let's start with the html. it's very simple: it mainly consists of a unordered list to make the tab bar and a few div tags with the content of each tab.
<body>
<div class="tabs">
    <ul class="tabs">
       <li class="nonactivetab" id="Tab_1"> Tab1 </li>
       <li class="nonactivetab" id="Tab_2"> Tab2 </li>
       <li class="activetab" id="Tab_3"> Tab3 </li>
       <li class="nonactivetab" id="Tab_4"> Tab4 </li>
    </ul>
    <div class="tabcontent" id="content_1">
       some content from Tab 1 <br/> <br/> some more content <br/> <br/> blah blah blah
    </div>
    <div class="tabcontent" id="content_2">
       some other content from Tab 2 <br/> <br/> some more content <br/> <br/> blah blah blah
    </div>
    <div class="tabcontent" id="content_3">
       some content here from Tab 3 <br/> <br/> some more content <br/> <br/> blah blah blah
    </div>
    <div class="tabcontent" id="content_4">
       some content from Tab 4 <br/> <br/> some more content <br/> <br/> blah blah blah
    </div>
</div>
</body>
Note the classes and id we have used for the tabs. These will be the key to the script. See how we used the "nonactivetab" class for non-active tabs and the "activetab" class for the active tab. Also note how the ids are incremented; the id of the corresponding div tag contains the same number.

Now let's add some style (in the HTML head tag):
<style type="text/css">
div.tabs, div.tabcontent, div.tabs ul, div.tabs ul li
{
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 1.0625em;/* 17/16px */
    font-weight: 200;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.0625em;/* 1/16px */
}

div.tabs
{
    text-align:center;
    width: 50%;
    margin: 1em auto;
    padding:0;
}

ul.tabs
{
    width:100%;
    margin:0;
    list-style-type:none;
    padding:0;
    overflow:hidden;
}

li.nonactivetab, li.activetab
{
    display:inline;
    margin:0 0.4%;
    height: 1.5em;
    line-height: 1.5em;
    font-size:1em;
    width:15%;
    float:left;
    background-color:#bbb;
    padding:0.5em 0;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    position:relative;
    z-index:2;
    border:0.0625em solid #888;
    cursor:pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;
}

li.activetab
{
    background-color:#ddd;
    z-index:4;
    border:0.0625em solid #888;
    border-bottom:0.0625em solid #ddd;
    cursor:default;
}

div.tabcontent
{
    background-color:#ddd;
    border: 0.0625em solid #888;
    padding:1em;
    position:relative;
    z-index:3;
    display:none;
    margin-top:-0.0625em;
}

</style>
A few important things:

So, we built the tabs but right now, they are not doing much. We will need to add a little JavaScript for the tabs to be functional.
<script>
$(document).ready(function(){
   
    function showActive()
    {
       var activeId = $(".activetab").attr("id");
       var splitid = activeId.split("_");
       var contentid = "content_"+splitid[1];
       $(".tabcontent").hide();
       $("#"+contentid).show();
    }
   
    $("ul.tabs li").click(function(){
       $("ul.tabs li").removeClass("activetab");
       $("ul.tabs li").addClass("nonactivetab");
       $(this).addClass("activetab");
       showActive();
    });
   
    showActive();
});

</script>
So, what's happening here? When the user will click one of the tabs, they will call their respective click() function, which will do a few things: make all tabs have the "nonactivetab" class (using the removeClass() and addClass() functions), give the clicked tab the "activetab" class, and then call the showActive() function.

The showActive() function will find the id of the active tab, get the index that we wrote at the end of the id, hide all tab contents and show the content having the same index than the clicked tab.

And here you go ... that's as simple as that.

Enjoy and let us know if that works for you.