TabControl in sharepoint

Scenario:
Tab Control for Webpart zone in sharepoint using JQuery

Insert into HTML Head:

<script type="text/javascript" src="tabcontent.js"/>
<script type="text/javascript" src="jquery.js"/>
<script type="text/javascript" src="jquery.dropshadow.js"/>
<script type="text/javascript">
 window.onload = function()
 { 
  $(".shadow").dropShadow({left: 10, top: 10, blur: 3});
  $("p").dropShadow({left: 6, top: 6, blur: 3});    
  $(".dropShadow").show();   
 } 
</script>

Insert into HTML Body:

<div>
 <ul id="tabcontrol" class="shadetabs">
  <li><a href="#" rel="Tab1" class="selected">Tab1</a></li>
  <li><a href="#" rel="Tab2">Tab2</a></li>
 </ul>
 <div style="border:1px solid gray; width:95%; margin-bottom: 1em; padding: 5px">
  <div id="Tab1" class="tabcontent">
   <WebPartPages:WebPartZone  runat="server" title="Zone 1" frametype="TitleBarOnly"><ZoneTemplate>
   </ZoneTemplate></WebPartPages:WebPartZone>
  </div>
  <div id="Tab2" class="tabcontent">
   <WebPartPages:WebPartZone  runat="server" title="Zone 2" frametype="TitleBarOnly"><ZoneTemplate>
   </ZoneTemplate></WebPartPages:WebPartZone>
  </div>
 </div>
</div>

Download Required JS Files:
http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm