Cara Pembuatan Tabs dengan Css & JavaScript(JS)

Hai Broo kali ini ane mau ngasih tau cara nya bikin Menu Tabs untuk meminimalisir Div yang terpakai atau pun konten yang kita pakai akan lebih mengirit tempat pada tampilan Web kita, saya mempostingkan Artikel ini yang bersumber di blog.kangrian.com yang sedikit saya edit dalam hasilnya agar tidak terlalu sama Saat penDEMO an nya..

Langsung saja tak perlu berlama - lama lagi dan tanpa basa basi





Ini Contoh DEMO nya : Link KlikLink

Langkah - Langkah 

_____________________________________________________

Pertama Kamu harus pasang dulu JQuery Library terlebih dahulu, Dan kamu letakan JQuery nya di atas </head> :

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

NOTE : Jangan pasang JQuery tersebut apabila telah terpasang di dalam Blog / Web kalian. Karena jika terdapat JQuery ganda akan Menimbulkan KOnflik 

Kedua SImpan kode Css berikut tepat 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>

Ketiga simpan JavaScript berikut 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>

Dan yang terakhir untuk penerapan HTML nya, kamu copy kode Widgetnya dan bisa kamu ganti isi nya sesuai dengan ke inginan kalian bisa KOnten , Gambar Video ataupun yang lainnya :

<div id="tabmenu">
    
    <ul id="nav">
        <li><a href="#" class="active">Tab ke-1</a></li>
        <li><a href="#">Tab kedua</a></li>
        <li><a href="#">Tab ketiga</a></li>
        <li><a href="#">Tab ke empat</a></li>
        <li><a href="#">Terakhir!</a></li>
    </ul>
    
    <div id="tab-konten">
        
        <div id="tab1">
            <p>Isi dengan konten sesuai keinginan kalian</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://url-rhenaldy.blogspot.com/' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBs1a80ZXWl5ArtMe6E4G8hN4iBA8awvTcfWNuaBaUOXSxzeM83SdQ8hFLeTYoMEs415rExNfOKlrlG_E-mj0GaRTs2fLiR3zGg8hBGuvLzytbYBpDDETt4Yl0BtU8oQ3S-VhQ7bDMkCc/s1600/wwwwwwwweeeeeeeerrrrrrrr.png' alt='Rhenaldy'/></a></p>
        </div>
     
        <!-- Batas Tab Konten -->
     
        <div id="tab4">
            <p>Ke-4? yah ke empat, dengan tambahan video :<br />
            <iframe width="560" height="315" src="https://www.youtube.com/embed/mtf7hC17IBM" frameborder="0" allowfullscreen></iframe></p>
        </div>
        
        <!-- Batas Tab Konten -->

            <div id="tab5">
                Sumber : http://blog.kangrian.com
            </div>

        <!-- Batas Tab Konten -->

    </div>
    
</div>

Mudah Bukan. Selamat Mencoba dan jangan Lupa Berkomentar ya..

Share :

Tweet

✚

Related Post