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