<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Simple Tab</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".tab_content").hide();
jQuery("ul.tabs li:first").addClass("active").show();
jQuery(".tab_content:first").show();
//On Click Event
jQuery("ul.tabs li").click(function() {
if(!jQuery(this).hasClass('active')){
jQuery("ul.tabs li").removeClass("active");
jQuery(this).addClass("active");
jQuery(".tab_content").hide();
var activeTab = jQuery(this).find("a").attr("href");
jQuery(activeTab).fadeIn();
return false;
}else{
return false;
}
});
});
</script>
<style type="text/css">
.details-tab-container{width: 800px; height:auto; position:absolute;}
.details-tab{ width:800px; float:left;}
.details-tab ul.tabs{ list-style-type:none;}
.details-tab li{background:#999; border:1px solid; float:left; padding:3px; margin:1px; border-radius: 6px;}
.details-tab li.active{background:#000;}
.details-tab li.active a{color:#FFF; font-size:14px; }
.details-tab li a{ text-decoration:none; font-family:Verdana, Geneva, sans-serif; font-weight:bold; font-size:11px; color:#000;}
.tab-container{ width:800px; float:left; border:2px solid;}
</style>
</head>
<body>
<div class="details-tab-container">
<div class="details-tab">
<ul class="tabs">
<li><a href="#description"><span>Product Description</span></a></li>
<li><a href="#attribute"><span>Product Attributes</span></a></li>
<li><a href="#review"><span>Product Reviews</span></a></li>
</ul>
</div>
<div class="tab-container">
<div class="tab_content" id="description">Description Lorem ipsum dolor sit amet, tation intellegebat cum ea, at vidit splendide has, te sit ridens salutatus abhorreant. Eum te augue cetero. Clita interpretaris eos cu. Per no senserit suscipiantur. Altera molestie eos ad, pro no fierent periculis. Ponderum convenire sit no.</div>
<div class="tab_content" id="attribute">Attributes Lorem ipsum dolor sit amet, tation intellegebat cum ea, at vidit splendide has, te sit ridens salutatus abhorreant. Eum te augue cetero. Clita interpretaris eos cu. Per no senserit suscipiantur. Altera molestie eos ad, pro no fierent periculis. Ponderum convenire sit no.</div>
<div class="tab_content" id="review">Review Lorem ipsum dolor sit amet, tation intellegebat cum ea, at vidit splendide has, te sit ridens salutatus abhorreant. Eum te augue cetero. Clita interpretaris eos cu. Per no senserit suscipiantur. Altera molestie eos ad, pro no fierent periculis. Ponderum convenire sit no.</div>
</div>
</div>
</body>
</html>
see the demo here.. :-)
No comments:
Post a Comment