Basic Pembuatan Tabs dengan CSS & JS

Setelah lama menyimpan script ini, akhirnya ada kesempatan juga buat posting! untuk sobat yang belum paham fungsi tabs, plugin tabs ini berfungsi untuk sobat yang ingin mencoba meminimalis content dalam 1 div/area . mengapa saya bilang basic? karena disini saya akan berbagi script dasar nya saja agar sobat bisa kreasikan sendiri setelahnya.

Biar gak penasaran berikut demo nya sob :

Cara Pemasangan :

Untuk pemasangan pastikan sobat sebelumnya sudah menyimpan 1 jQuery Library, jika belum silahkan simpan kode jQuery libray di bawah ini sebelum kode </head> :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Pemasangan jQuery pada template cukup 1 saja. Apabila ada beberapa versi jQuery library, maka efek-efek tidak akan berjalan.

Langkah #1 : Simpan kode CSS di bawah ini sebelum kode </head>


<style type="text/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;

}
</style>

Langkah #2 : Simpan kode Javascript di bawah ini tepat di atas kode </body> :


<script type='text/javascript'>
//<![CDATA[
$('#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); 
});
//]]>
</script>

Penulisan Pada HTML

Langkah Terakhir : Simpan pada area posting / widget di halaman Blog sobat.


<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>

        <!-- Batas Tab Konten -->

    </div>
    
</div>

Coba-coba??

Untuk mencoba dan praktek langsung sobat bisa Klik disini

Semoga Tutorial tentang Cara Membuat Tabs Sederhana / Pembuatan Basic Tabs dengan CSS & JavaScript ini bermanfaat .