Jquery Tab Ala Jaluffy

Maaf,karena ada gangguan Tante Sality di PC saya,jadi tidak bisa posting deh,nah berhubung sudah saya perbaiki,saya mau posting tentang Jquery Tabs.

Saya terinspirasi membuat Tab ini dari Jquery-UI,berhubung saya masih amatir,saya membuat ini tidak terlalu bagus sih,tapi saya kira sudah cukup lah

hehe

Sama seperti sebelumnya,saya hanya menggunakan Show dan Hide [ Baru bisa sampai situ T.T ]

Mari kita mulai ! :)

Masukan Script dibawah ini kedalam widget.

 <script type="text/javascript">
      $(document).ready(function() {
            $(".t1").click(function() {
                $(".i1").show();
                $(".i2").hide();
                $(".i3").hide();
                $(".t1").css("background-color","#FFFFFF");
                $(".t2").css("background-color","#999999");
                $(".t3").css("background-color","#999999");
            });
             $(".t2").click(function() {
                 $(".i1").hide();
                $(".i2").show();
                $(".i3").hide();
                $(".t1").css("background-color","#999999");
                $(".t2").css("background-color","#FFFFFF");
                $(".t3").css("background-color","#999999");
            });
             $(".t3").click(function() {
                 $(".i1").hide();
                $(".i2").hide();
                $(".i3").show();
                $(".t1").css("background-color","#999999");
                $(".t2").css("background-color","#999999");
                $(".t3").css("background-color","#FFFFFF");
            });
        });
    </script>
<style type="text/css">
.kotak
{
background:#CCCCCC;
height:300px;
border-radius:5px;
padding-right:3px;
width:245px;
}
.t1,.t2,.t3
{
background:#FFFFFF;
height:25px;
width:auto;
float:left;
margin-top:3px;
cursor:pointer;
border-top-left-radius:5px;
border-top-right-radius:5px;
text-align:center;
margin-left:3px;
padding:1px;
}
.t3,.t2
{
    background:#999999;
}
.i1,.i2,.i3
{
background:#FFFFFF;
overflow:auto;
height:275px;
width:239px;
float:left;
margin-left:3px;
margin-right:3px;
margin-bottom:3px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
border-top-right-radius:5px;
}
.i2,.i3
{
display:none;
}
</style>
<div class="kotak">
<div class="t1">Ini Tab 1</div>
<div class="t2">Ini Tab 2</div>
<div class="t3">Ini Tab 3</div>
<div class="i1">Ini Isi 1</div>
<div class="i2">Ini Isi 2</div>
<div class="i3">Ini Isi 3</div>
</div>

Tuh kan,masih dasar banget T.T ,Silahkan diedit Width nya dan disesuaikan dengan blog kamu :)


Semoga Bermanfaat :D


Demonya bisa dilihat disini :)