Blogger Dinamik Tab Menü

Yazı içerisinde kullanımında temalara göre sorunlar çıkarıyor siz yine bir deneyin.Gadget ekleme yöntemi ile kullanımı tavsiye ederim

Aşaıda ki kodları kopyalayın ve gerekli yerleri düzenleyerek kullanın.

<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
.tabs{
  width:50%;
  margin:10px auto;
}
.tab-buttons span{
  font:400 14px 'open sans',sans-serif;
  color:#333;
  background:#eee;
  cursor:pointer;
  border-bottom:2px solid #ddd;
  display:inline-block;
  margin-right:10px;
  padding:10px;
}
.tab-buttons span.active{
  border-bottom:2px solid #333;
}
.tab-content{
  margin-top:15px;
  border-bottom:3px solid #ddd;
  padding:15px;
  background:#eee;
  font:400 13px 'open sans',sans-serif;
  color:#333;
}
</style>
<div class='tabs'>
  <div class='tab-buttons'>
    <span class='content1'>Button 1</span>
    <span class='content2'>Button 2</span>
    <span class='content3'>Button 3</span>
  </div>
  <div class='tab-content'>
    
    <div class='content1'>This is the content of 1 container.This will be open when button 1 is clicked.This is the content of 1 container.This will be open when button 1 is clicked.This is the content of 1 container.This will be open when button 1 is clicked.</div>
    
    <div class='content2'>This is the content of 2 container.This will be open when button 2 is clicked.This is the content of 2 container.This will be open when button 2 is clicked.This is the content of 2 container.This will be open when button 2 is clicked.</div>
    
    <div class='content3'>This is the content of 3 container.This will be open when button 3 is clicked.This is the content of 3 container.This will be open when button 3 is clicked.This is the content of 3 container.This will be open when button 3 is clicked.</div>
    
  </div>
</div>
<script>
$('.tab-buttons span').first().addClass('active');
$('.tab-content>div').hide();
$('.tab-content>div').first().slideDown();
  $('.tab-buttons span').click(function(){
    $('.tab-buttons span').removeClass('active');
    var thisclass=$(this).attr('class');
    $(this).addClass('active');
    $('.tab-content>div').each(function(){
      if($(this).hasClass(thisclass)){
        $(this).fadeIn(800);
      }
      else{
        $(this).hide();
      }
    });
  });
</script>

Blogumuza Abone Olun
Yeni Yazılar E-posta Adresinize Gelsin

Not: Gelen Maili Aktif  Etmeyi Unutmayınız!