A while back, I was working on some web pages that required a tabbed menu at the top of the content. In addition, the requirement was that the page should not perform a post back when the user clicked on the individual tabs. It was very important to have a simple, clean, and responsive look and feel. I could have used one of the countless examples found on the Internet, but I wanted to use implement something that was very minimal, clean, and simple. I was not happy with what I found out there. So this is what I came up with. I used some basic HTML, CSS, and jQuery, although the JavaScript I used could have been written without the help of jQuery. My pages already included jQuery so I decided to leverage it.

The code works and renders the same across modern versions of Chrome, Internet Explorer, and Firefox.

You can see a working demo on JSFiddle.net

Here is a screenshot of what the HTML markup and Styling produces...


If you find it useful, feel free to use it for your own projects.

Edited by JorgeM

<!DOCTYPE html>
* {
    margin: 0;
    padding: 0;
body {
    background-color: #f0f0f0;
    color: #606060;

#wrapper {
    margin: 2em auto;
    width: 40em;
    border: 1px solid #aaa;

#main-content {
    height: 480px;
    background-color: #fff;
    padding: 1em;
    position: relative;
    border-top: 1px solid #aaa;
#tabs {
    background-color: #c8b6da;
    padding: 1.5em 1.5em 0.4em; 

#tab-list li {
    display: inline;
    background-color: #e7e7e7;
    padding: 0.5em 0;
    border: 1px solid #aaa;
    cursor: pointer;

#tab-list li.tab span {
    padding: 0.5em 1em;

#tab-list li.tab-active span {
    background-color: #fff;
    position: relative;
    z-index: 999;

#tab-list li.tab-active {
    color: #e17009;

.div-tab {
    display: none;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <div id="wrapper">
        <div id="tabs">
            <ul id='tab-list'>
                <li id='tab-1' class='tab'><span>Tab-1</span></li>
                <li id='tab-2' class='tab'><span>Tab-2</span></li>
                <li id='tab-3' class='tab'><span>Tab-3</span></li>

        <div id="main-content">
            <div id="div-tab-1" class="div-tab">Content #1</div>
            <div id="div-tab-2" class="div-tab">Content #2</div>
            <div id="div-tab-3" class="div-tab">Content #3</div>


     // Initialize default tab and content

     // Handle the tab clicks
     $('.tab').click(function () {
         var active = $(this).attr('id');
         $('#div-' + active).show();


I enjoy being challanged on a daily basis. I love all aspects of technology and business.

Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.