Basit solma efektli sekme

Soh Tanaka tarafından   hazırlanmış basit  ve kullanışlı bir tab örneği. Bu örneği kullanarak websayfanızın sağ köşesine tab sekmeleri yerleştirebilirsiniz. Sekmeler  arası geçiş jQuery fade in efekti  kullanıldığı için bir sekme  tıkladığınızda bir önceki sekme solup kayboluyor. Aynı şekilde tıklamış olduğunuz tab içeriği de netleşip görünüyor.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölümler.

Js dosya adresi :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

JavaScript : 

<script type="text/javascript">
$(document).ready(function() {
 //Default Action
 $(".tab_content").hide(); //Hide all content
 $("ul.tabs li:first").addClass("active").show(); //Activate first tab
 $(".tab_content:first").show(); //Show first tab content 
 //On Click Event
 $("ul.tabs li").click(function() {
 $("ul.tabs li").removeClass("active"); //Remove any "active" class
 $(this).addClass("active"); //Add "active" class to selected tab
 $(".tab_content").hide(); //Hide all tab content
 var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
 $(activeTab).fadeIn(); //Fade in the active content
 return false;
 });
});
</script>

Css : 

<style type="text/css">
body {
 background: #f0f0f0;
 margin: 0;
 padding: 0;
 font: 10px normal Verdana, Arial, Helvetica, sans-serif;
 color: #444;
}
h1 {font-size: 3em; margin: 20px 0;}
.container {width: 500px; margin: 10px auto;}
ul.tabs {
 margin: 0;
 padding: 0;
 float: left;
 list-style: none;
 height: 32px;
 border-bottom: 1px solid #999;
 border-left: 1px solid #999;
 width: 100%;
}
ul.tabs li {
 float: left;
 margin: 0;
 padding: 0;
 height: 31px;
 line-height: 31px;
 border: 1px solid #999;
 border-left: none;
 margin-bottom: -1px;
 background: #e0e0e0;
 overflow: hidden;
 position: relative;
}
ul.tabs li a {
 text-decoration: none;
 color: #000;
 display: block;
 font-size: 1.2em;
 padding: 0 20px;
 border: 1px solid #fff;
 outline: none;
}
ul.tabs li a:hover {
 background: #ccc;
} 
html ul.tabs li.active, html ul.tabs li.active a:hover {
 background: #fff;
 border-bottom: 1px solid #fff;
}
.tab_container {
 border: 1px solid #999;
 border-top: none;
 clear: both;
 float: left; 
 width: 100%;
 background: #fff;
 -moz-border-radius-bottomright: 5px;
 -khtml-border-radius-bottomright: 5px;
 -webkit-border-bottom-right-radius: 5px;
 -moz-border-radius-bottomleft: 5px;
 -khtml-border-radius-bottomleft: 5px;
 -webkit-border-bottom-left-radius: 5px;
}
.tab_content {
 padding: 20px;
 font-size: 1.2em;
}
.tab_content h2 {
 font-weight: normal;
 padding-bottom: 10px;
 border-bottom: 1px dashed #ddd;
 font-size: 1.8em;
}
.tab_content h3 a{
 color: #254588;
}
.tab_content img {
 float: left;
 margin: 0 20px 20px 0;
 border: 1px solid #ddd;
 padding: 5px;
}
</style>

• Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<div class="container">
 <ul class="tabs">
 <li><a href="#tab1">Gallery</a></li>
 <li><a href="#tab2">Submit</a></li>
 <li><a href="#tab3">Resources</a></li>
 <li><a href="#tab4">Contact</a></li>
 </ul>
 <div class="tab_container">
 <div id="tab1" class="tab_content">
 <h2>Başlık</h2>
 <a href="#"><img src="simonamunteanu_thumb.gif" alt="" /></a>
 <h3><a href="#">www.mintik.com</a></h3>
 <p></p>
 </div>
 <div id="tab2" class="tab_content">
 <h2>Başlık</h2>
 <a href="#"><img src="simonamunteanu_thumb.gif" alt="" /></a>
 <h3><a href="#">www.mintik.com</a></h3>
 <p></p>
 </div>
 <div id="tab3" class="tab_content">
 <h2>Başlık</h2>
 <a href="#"><img src="simonamunteanu_thumb.gif" alt="" /></a>
 <h3><a href="#">www.mintik.com</a></h3>
 <p></p>
 </div>
 <div id="tab4" class="tab_content">
 <h2>Başlık</h2>
 <a href="#"><img src="simonamunteanu_thumb.gif" alt="" /></a>
 <h3><a href="#">www.mintik.com</a></h3>
 <p></p>
 </div>
 </div>
</div>