Simple Tabs

by itzmeamar

HTML

<script src="https://sites.google.com/site/amarzr21/js/simple-tabs.js"></script>
<script src="https://sites.google.com/site/amarzr21/js/tabs.js.js"></script>
<div id="tabs" class="clearfix">
         
    <ul>
        <li><a href="#tab1" title="Tab1 Title">Tab 1</a></li>
        <li><a href="#tab2" title="Tab2 Title">Tab 2</a></li>
        <li><a href="#tab3" title="Tab3 Title">Tab 3</a></li>
    </ul>
         
</div>    
 
<div id="panels">
    <div class="panel-wrapper">
        <div class="panel">
            <h2>Panel 1</h2>
            <p>Nullam in dui mauris. ......</p> <p>
            <a href="#tab2">Go to Tab2</a></p>
        </div>
        <div class="panel">
            <h2>Panel 2</h2>
            <p>Nullam in dui mauris. ......</p><p>
            <a href="#tab3">Go to Tab3</a></p>        
        </div>
        <div class="panel">
            <h2>Panel 3</h2>
            <p>Nullam in dui mauris. ......</p><p>
            <a href="#tab1">Back to Tab1</a></p>      
        </div>
    </div>
</div> <!-- //#panels -->

CSS

body {
    font-family:arial;
    font-size:75%;
    margin:10px;
    padding:0;
}
 
a {
    text-decoration:none;
    outline:none;
}
 
#container {
    width:600px;
    margin:0 auto;
}
 
#tabs ul {
    list-style:none;
    margin:0;
    padding:0;
}
 
    #tabs ul li {
        float:left;
    }
     
    #tabs ul li a {
        display:block;
        padding:5px 10px;
        font-weight:bold;
        color:#aaa;
        text-decoration:none;
        font-size:120%;
    }       
    #tabs ul li.active a {
        background:#ccc;
        color:#fff;
    }               
 
#panels {
    width:100%;
    background:#ccc;
}
    #panels .panel-wrapper {
        padding:10px;
    }
 
    #panels .panel {
         
    }
 
    #panels .panel h2 {
        margin:0 0 10px 0;  
    }       
 
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */    
 
/*
* CSS3 Styling
*/
 
#tabs ul li a {
    border-top-left-radius : 5px;      
    border-top-right-radius : 5px;              
}
#panels {
    border-bottom-left-radius : 5px;      
    border-bottom-right-radius : 5px;       
}

JavaScript

var QTABS = {
 
    init: function () {
     
        // attached onload and change event to address plugin
        $.address.init(function(event) {
             
            // first load, set panel
            QTABS.setPanel(event);
                 
        }).change(function(event) {
 
            // if the url changes, set panel
            QTABS.setPanel(event);          
 
        });
     
    },
     
    // the core function to display correct panel
    setPanel: function (event) {
     
        // grab the hash tag from address plugin event
        var hashtag = event.pathNames[0];
         
        // get the correct tab item, if no hashtag, get the first tab item
        var tab = (hashtag) ? $('#tabs li a[href=#' + hashtag + ']') : $('#tabs li:first a');
 
        // reset everything to default
        $('#tabs li').removeClass('active');
        $('#panels .panel').hide();

        // if hashtag is found
        if (hashtag) {
             
            // set current tab item active and display correct panel
            tab.parent().addClass('active');
            $('#panels .panel:eq(' + (tab.parent().index()) + ')').show();          
             
        } else {
 
            // set the first tab item and first panel               
            $('#tabs li:first').addClass('active');
            $('#panels .panel:first').show();           
         
        }
         
        // change the page title to current selected tab
        document.title = tab.attr('title');
         
    }
 
}
 
// Execute this script!
QTABS.init();