<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})

})
</script>
<style type="text/css">
.mainContent{width:980px; margin:auto;}
.mainContent .left{width:980px;}
.mainContent .right{width:980px;}
.clr{clear:both;}
ul.tabs{margin: 0px; padding: 0px; list-style: none;}
ul.tabs li{background: none; color: #222; display: inline-block; padding: 5px 10px; cursor: pointer;}
ul.tabs li.current{/*background: #ededed;*/color: #222;}
.tab-content{display: none; background: #ededed; padding: 15px;}
.tab-content.current{display: inherit;}
</style>
<div class="mainContent">
	<div class="left">
	<ul class="tabs">
		<li class="tab-link" data-tab="tab-1"><img src="images/db-images/task.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-2"><img src="images/db-images/event.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-3"><img src="images/db-images/follow-ups.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-4"><img src="images/db-images/to-do.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-5"><img src="images/db-images/notes.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-6"><img src="images/db-images/tada.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-7"><img src="images/db-images/leads.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-8"><img src="images/db-images/quotation.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-9"><img src="images/db-images/sales-order.jpg" height="100" width="101"></li>		<li class="tab-link" data-tab="tab-10"><img src="images/db-images/dispatch.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-11"><img src="images/db-images/invoice.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-12"><img src="images/db-images/performa-invoice.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-13"><img src="images/db-images/pr.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-14"><img src="images/db-images/vendor_quotation.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-15"><img src="images/db-images/comprative.jpg" height="100" width="101"></li>		<li class="tab-link" data-tab="tab-16"><img src="images/db-images/PO.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-17"><img src="images/db-images/approved-po.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-18"><img src="images/db-images/mrn.jpg" height="100" width="101"></li>
		
		<li class="tab-link" data-tab="tab-19"><img src="images/db-images/job-card.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-20"><img src="images/db-images/demand-slip.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-21"><img src="images/db-images/daily-production-entry.jpg" height="100" width="101"></li>		
		<li class="tab-link" data-tab="tab-22"><img src="images/db-images/mrs.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-23"><img src="images/db-images/wip.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-24"><img src="images/db-images/production-work-order.jpg" height="100" width="101"></li>
		
		<li class="tab-link" data-tab="tab-25"><img src="images/db-images/incoming-inspection.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-26"><img src="images/db-images/shop-floor-inspection.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-27"><img src="images/db-images/pre-dispatch.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-28"><img src="images/db-images/collection-amount.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-29"><img src="images/db-images/payment-amount.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-30"><img src="images/db-images/balance.jpg" height="100" width="101"></li>
		
		<li class="tab-link" data-tab="tab-31"><img src="images/db-images/vendor-outstanding.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-32"><img src="images/db-images/sale-outstanding.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-33"><img src="images/db-images/daily-attendence.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-34"><img src="images/db-images/travel-plan.jpg" height="100" width="101"></li>
		<li class="tab-link" data-tab="tab-35"><img src="images/db-images/performance.jpg" height="100" width="101"></li>
	</ul>
	</div>
	<div class="right">
	<div id="tab-1" class="tab-content current">Task</div>
	<div id="tab-2" class="tab-content">Event</div>
	<div id="tab-3" class="tab-content">Follow Ups</div>
	<div id="tab-4" class="tab-content">To Do</div>
	<div id="tab-5" class="tab-content">Notes</div>
	<div id="tab-6" class="tab-content">TA DA</div>
	<div id="tab-7" class="tab-content">lead</div>
	<div id="tab-8" class="tab-content">Quotation</div>
	<div id="tab-9" class="tab-content">Sales Order</div>
	<div id="tab-10" class="tab-content">Dispatch</div>
	<div id="tab-11" class="tab-content">Invoice</div>
	<div id="tab-12" class="tab-content">Performa Invoice</div>
	<div id="tab-13" class="tab-content">PR</div>
	<div id="tab-14" class="tab-content">vendor quotation</div>
	<div id="tab-15" class="tab-content">Comprative</div>
	<div id="tab-16" class="tab-content">PO</div>
	<div id="tab-17" class="tab-content">Approved PO</div>
	<div id="tab-18" class="tab-content">WIP</div>
	<div id="tab-19" class="tab-content">job-card</div>
	<div id="tab-20" class="tab-content">demand-slip</div>
	<div id="tab-21" class="tab-content">daily-production-entry</div>
	<div id="tab-22" class="tab-content">PO1</div>
	<div id="tab-23" class="tab-content">wip</div>
	<div id="tab-24" class="tab-content">Production Work Order</div>
	<div id="tab-25" class="tab-content">Incoming Inspection</div>
	<div id="tab-26" class="tab-content">Shop Floor Inspection</div>
	<div id="tab-27" class="tab-content">Pre Dispatch</div>
	<div id="tab-28" class="tab-content">Collection Amount</div>
	<div id="tab-29" class="tab-content">Payment Amount</div>
	<div id="tab-30" class="tab-content">Balance</div>
	<div id="tab-31" class="tab-content">Vendor Outstanding</div>
	<div id="tab-32" class="tab-content">Sale Outstanding</div>
	<div id="tab-33" class="tab-content">Daily Attendence</div>
	<div id="tab-34" class="tab-content">Travel Plan</div>
	<div id="tab-35" class="tab-content">Performance</div>
	</div>
</div>
<div class="clr"></div>