Tue 4 Feb 2014
Jquery Tabs
By
RadheyShyam Sharma
For implementing jquery tabs :
1) First of all add jquery and Style:
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js" type="text/javascript"></script>
<style>
/*****************************Tabs**************************************/
#tabs {font-size: 11px;margin:20px 0; float:left;}
#tabs ul {float: left; width: 500px;}
#tabs li {margin-left: 2px; list-style: none;}
* html #tabs li {display: inline;}
#tabs li, #tabs li a {float: left; color:#999; }
#tabs ul li {border-radius:6px 6px 0px 0px;width: 140px;}
.ProTabDetail ul li{text-align:center; width:140px;}
.ProTabDetail ul li a{ padding:5px 0px; text-align:center; width:140px;}
li.active { background:#fafafa; color:#666; border:1px solid #eee;border-bottom:none;}
.DtlsDiv{ float:left;background:#fafafa; padding:5px;border:1px solid #eee;border-top:none;}
.Head{color:#999;}
</style>
2) add tabs code:
<script type="text/javascript">
$(document).ready(function() {
$('#tabs div.subDiv').hide();
$('#tabs div.subDiv:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div.subDiv').hide();
$(currentTab).show();
return false;
});
});
</script>
3) The Example HTML:
<div id="tabs" class="ProTabDetail">
<ul class="tabul" >
<li class="Tab1">
<a href="#tab-1"><div class="Head">Specification</div></a>
</li>
<li class="Tab1">
<a href="#tab-2"><div class="Head">Description</div></a>
</li>
</ul>
<div class="subDiv" id="tab-1">
<p>
<div class="DtlsDiv">
<div class="ProductDetails">
<div class="MainBox">
<div class="RowDivTitle" >Type</div>
<div class="RowDivCont" >Test </div>
</div>
<div class="MainBox">
<div class="RowDivTitle">Size</div>
<div class="RowDivCont">Test </div>
</div>
<div class="MainBox">
<div class="RowDivTitle">Color</div>
<div class="RowDivCont">Test </div>
</div>
<div class="MainBox">
<div class="RowDivTitle">Washcare</div>
<div class="RowDivCont">Test </div>
</div>
<div class="MainBox">
<div class="RowDivTitle">Color</div>
<div class="RowDivCont">Test </div>
</div>
<div class="MainBox">
<div class="RowDivTitle">Style</div>
<div class="RowDivCont">Test </div>
</div>
<div class="MainBox">
<div class="RowDivTitle">Material</div>
<div class="RowDivCont">Test </div>
</div>
<div class="MainBox">
<div class="RowDivTitle">Gender</div>
<div class="RowDivCont">Test </div>
</div>
<div class="MainBox" style="margin-bottom:10px;">
<div class="RowDivTitle">Weight</div>
<div class="RowDivCont">Test </div>
</div>
</div>
</div>
</p>
</div>
<div class="subDiv" id="tab-2">
<p>
<div class="DtlsDiv">
<div class="ProductDescription" style="border-bottom:none;">Test </div>
</div>
</p>
</div>
</div>