ul.tabs{margin:0 -10px;}
.tabs li{list-style:none;display:inline;}
.tabs a{padding:5px 10px;display:inline-block;background:#666;color:#fff;text-decoration:none;}
.tabs a.active {background:#fff;color:#000;}
#tab1,#tab2,#tab3{padding:10px;width:600px;background:#fff;}
2. Copy Paste kode berikut sebelum kode </head>
<script type='text/javascript'>
$(document).ready(function(){
$('ul.tabs').each(function(){
var $active, $content, $links = $(this).find('a');
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active[0].hash);
$links.not($active).each(function () {
$(this.hash).hide();
});
$(this).on('click', 'a', function(e){
$active.removeClass('active');
$content.hide();
$active = $(this);
$content = $(this.hash);
$active.addClass('active');
$content.show();
e.preventDefault();
});
});
});
</script>
3. Copy Paste kode dibawah ini dipostingan anda pada HTML bukan Compose, dengan catatan Lebar dan Tinggi yang digunakan sesuai atau disesuaikan dengan nilai lebar yang ada di kode CSS diatas:
<ul class='tabs'>
<li><a href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id='tab1'>
<h3>Section 1</h3>
<p>Ganti dengan tulisan atau gambar atau apapun yang Anda inginkan</p>
</div>
<div id='tab2'>
<h3>Section 2</h3>
<p>Ganti dengan tulisan atau gambar atau apapun yang Anda inginkan</p>
</div>
<div id='tab3'>
<h3>Section 3</h3>
<p>Ganti dengan tulisan atau gambar atau apapun yang Anda inginkan</p>
</div>
Demikian informasi tentang Cara Membuat Tab View Postingan Blog. Maaf jika ada kekurangan, silahkan tambahkan beberapa kekurangan pada artikel di kolom komentar. Saya harap informasi ini bermanfaat.
No comments:
Post a Comment