Tab Content

CSS<style type='text/css'>div.tab-wrapper{width:100%;margin:auto;text-align:center}div.tab-button-wrapper ul{padding:0;list-style:none}div.tab-button-wrapper li{width:50%;float:left}a.tab-button-first{border-radius:3px 0 0 0;-webkit-border-radius:3px 0 0 0;-moz-border-radius:3px 0 0 0;text-transform: uppercase;font-weight: bold;}a.tab-button-last{border-radius:0 3px 0 0;-webkit-border-radius:0 3px 0 0;-moz-border-radius:0 3px 0 0;border-right:0}div.tab-button-wrapper a{display:block;padding:1em;text-decoration:none;color:#fff;background-color:#d58151;border-right:1px solid transparent}a.tab-button-hidden{opacity:.5;text-transform: uppercase;font-weight: bold;}div.tab-body{padding:1em;clear:both;background-color:#fff;min-height:85%;border-radius:0;-webkit-border-radius:0;-moz-border-radius:0;border:1px solid #c5c5c5}div.tab-body-hidden{display:none}</style>

Jquery<script type='text/javascript'>var last_tab=1;function loadTab(a){if(a===last_tab){return}document.getElementById("tab"+last_tab).style.display="none";document.getElementById("tab"+a).style.display="block";document.getElementById("tab-button"+last_tab).style.opacity="0.5";document.getElementById("tab-button"+a).style.opacity="1.0";last_tab=a};</script>

HTML<div class="tab-wrapper">
<div class="tab-button-wrapper">
<ul>
<li><a class="tab-button-first" id="tab-button1" href="javascript:void(0)" onclick="loadTab(1)" title=''>Chi tiết S-Phẩm</a></li>
<li><a class="tab-button-hidden" id="tab-button2" href="javascript:void(0)" onclick="loadTab(2)"title=''>Hình sản phẩm</a></li>
</ul>
</div></div>
<div class="tab-body-wrapper">
<div class="tab-body" id="tab1">
Nội dung sản phẩm ở đây
</div></div>
<div class="tab-body tab-body-hidden" id="tab2">
<img src="http://www.digitalartistsonline.com/static/images/carousel/read_books.jpg" style="width:100%;height:100%" />
</div>