Membuat Tab dengan Jquery

kemarin2 ada teman minta tolong mengenai tab , dia download script tab di internet cuma sepertinya dia ada yang kurang dengan settingannya karena tab nya belum bisa
akhirnya aku dipanggil dan daripada harus mengoprek codingan punya orang yang harus memahami dulu akhirnya aku buatkan tab jquery menurut versiku, memang sih jquery juga menyediakan UI yang ada tab nya, tapi karena aku juga ingin belajar jadi aku buat sendiri saja

Ini adalah css nya dia yang sudah ada :

<style type=”text/css”>

.tabMenu{
padding:5px;
background:#3ea0ff;
border-bottom:1px black solid;
width:500px;
}
.tabMenu a{
text-decoration:none;
background:#3ea0ff;
padding:5px;
color:white;
}
.tabMenu a:hover{
text-decoration:none;
background:#b2d9ff;
padding:5px;
color:blue;
border-bottom:3px white solid;
}
.tabMenu a.selected{
text-decoration:none;
background:#b2d9ff;
padding:5px;
color:blue;
border-bottom:3px white solid;
}
</style>

sebelumnya harus memasukkan jquery nya dulu ya :
<script type=”text/javascript” language=”javascript” src=”jquery.js”></script>
Dan ini script yang aku buat kemarin2 :
<script type=”text/javascript”>
$(function(){
/* buat menyembunyikan selain yang pertama */
$(‘.tabcontent_section’).find(‘.tabcontent:not(:first)’).hide();
var head = $(‘#mytab’).find(‘a’);$(‘#mytab’).find(‘a:first’).addClass(‘selected’);

$(head).each(function(){

$(this).click(function(){

var id_container = $(this).attr(‘rel’);

$(‘.tabcontent_section’).find(‘.tabcontent’).hide();
$(‘.tabcontent_section’).find(‘#’+id_container).show();

$(‘#mytab’).find(‘a’).not(this).removeClass(‘selected’);
$(this).addClass(‘selected’);

})
})
});
</script>

Sedangkan ini adalah html nya punya dia
<div>
<div id=”mytab”>
<a href=”<?php echo base_url() ?>site/cekStat#” rel=”not”>Notify</a>
<a href=”<?php echo base_url() ?>site/cekStat#” rel=”stat” >Statistics</a>
<a href=”<?php echo base_url() ?>site/cekStat#” rel=”info”>Info</a>
<a href=”<?php echo base_url() ?>site/cekStat#” rel=”due”>Access</a>
</div><div>
<div id=”not”>
Ini adalah Notify
</div>
<div id=”stat”>
Ini adalah Statistics
</div>
<div id=”info”>
Ini adalah Info
</div>
<div id=”due”>
Ini adalah Access
</div>
</div>
</div>
Maaf itu aku buat seketika, mungkin ada yang lebih efisien

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s