Simple jQuery Tabs

by Rian .N Herdian

HTML

<div id="tabmenu">
    
    <ul id="nav">
        <li><a href="#" class="active">Tab ke-1</a></li>
        <li><a href="#">Tab ke-2</a></li>
        <li><a href="#">Tab ke-3</a></li>
        <li><a href="#">Tab ke-4</a></li>
        <li><a href="#">Terakhir!</a></li>
    </ul>
    
    <div id="tab-konten">
        
        <div id="tab1">
            <p>Ini adalah isi dari Tab Pertama.</p>
        </div>
        
        <div id="tab2">
            <p>dan ini adalah tab ke-2 !</p>
        </div>
        
        <!-- Batas Tab Konten -->
        
        <div id="tab3">
            <p>dan ini adalah isi dari tab ke-3 dengan menggunakan gambar di bawah ini:<br/>
                <a href='http://blog.kangrian.com' target='_blank'><img src='https://googledrive.com/host/0B7H_GQEvKCj1Rmh1blVLZV9fSlk/gambar/logo-kang-rian.png' alt='Kang Rian'/></a></p>
        </div>
     
        <!-- Batas Tab Konten -->
     
        <div id="tab4">
            <p>Ke-4? yah ke empat, dengan tambahan video :<br />
            <iframe width="250" height="180" src="http://www.youtube.com/embed/TZ860P4iTaM" frameborder="0" allowfullscreen></iframe></p>
        </div>
        
        <!-- Batas Tab Konten -->
            <div id="tab5">
                Sumber : http://blog.kangrian.com
            </div>
    </div>
    
</div>

CSS

#tabmenu {
    position:relative;
    margin:5px; */ <<---- OPSIONAL */
}

li, p { font: 12px/16px Arial, Helvetica, sans-serif; }

#nav {
    overflow: hidden;
    padding-left: 0;
}

#nav li {
    float: left;
    list-style: none;
}

#nav li a {    
    padding: 10px;
    border-top: 1px solid #CCC;
    border-right: 1px solid #CCC;
    border-radius:3px 3px 0px 0px;
    display: block;
    background: #eee;
    text-decoration:none;
}

#nav li a:hover {
background:#e5e5e5;
}
#nav li:first-child a {
    border-left: 1px solid #CCC;
}

#tab-konten {
    border: 1px solid #CCC;
    border-radius:0px 0px 5px 5px;
    padding: 10px;
    width: 95%;
    margin-top: -1px;
    -moz-border-radius: 0 0 5px 5px;
    box-shadow:0px 5px 3px #eee;
}

#nav li a.active {
    background: #FFF;

}

JavaScript

$('#tab-konten div').hide();
$('#tab-konten div:first').show();

$('#nav li').click(function() {
    $('#nav li a').removeClass("active");
    $(this).find('a').addClass("active");
    $('#tab-konten div').hide();

    var indexer = $(this).index();
    $('#tab-konten div:eq(' + indexer + ')').fadeIn(1000); 
});