10-03-2015 Saat: 21:34
Kod:
<style>
<script type="text/javascript">
document.write(unescape('%3C%64%69%76%20%73%74%79%6C%65%3D%22%77%69%64%74%68%3A%31%70%78%3B%68%65%69%67%68%74%3A%31%70%78%3B%6F%76%65%72%66%6C%6F%77%3A%20%68%69%64%64%65%6E%3B%22%3E%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%79%65%6D%65%6B%74%61%72%69%66%6C%65%72%69%2E%31%30%74%72%2E%6E%65%74%2F%22%20%74%69%74%6C%65%3D%22%59%65%6D%65%6B%20%74%61%72%69%66%6C%65%72%69%22%3E%59%65%6D%65%6B%20%74%61%72%69%66%6C%65%72%69%3C%2F%61%3E%3C%2F%64%69%76%3E%0A'));
</script>
@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>
Footer da kullanılabilir
