SharePoint Tab Web Part with JQuery

I found very easy way to implement Tab Control in Sharepoint using jQuery,

Steps:


- The first thing that you will need to do is identify the document/page library to house the tabpage.
This page can be added to any document library and so it gives you much flexibility as to where you deploy this.
- Download the tabpage file from here: http://www.bitsofsharepoint.com/ExamplePoint/Download/TabPage.zip
- Extract the contents of the zip file and then upload to a document or page library
- In this step you will want to open the page.
- Then go to Site Actions and select Edit Page
- Now look for the section called "Tab"
- Click "Add a Web Part"
- Select a Content Editor Web Part and click Add
- Now edit the Content Editor Web Part (CEWP)
- At this point you will then want to open up the Source Editor and past in the code below
- Now you will need to decide the number of tabs you want.
- To have less then 8 tabs I recommend that you do the following, add <!--  & --> to the start of this code <li> and the end of this code </li>
- This will allow you to easily add a tab back if you need it in the future with out having to remember the code to add
- Example: <!--<li><a href="#tab-8" ><span>TAB 8</span></a></li>-->
- Next you will want to the change the title of the tabs.
- The title is found between the code <span>  </span>
- Last do you want the  Tab Page Help to show or NOT show
- Add the <script> code to HIDE the help button
- Below is the code to add to the CEWP

<!-- Code to hide Tab Page Help Link -->
<script type="text/javascript">
   $(document).ready(function() {
        $('#TabPageHelp').hide();
   });
</script>

<!-- Code to add Tabs -->

<div id="tabs">

     <ul class="tabNavigation ms-WPBody">

         <li><a href="#tab-1" class="selected ms-topnavselected"><span>TAB 1</span></a></li>

          <li><a href="#tab-2" ><span>TAB 2</span></a></li>

          <li><a href="#tab-3" ><span>TAB 3</span></a></li>

          <li><a href="#tab-4" ><span>TAB 4</span></a></li>

          <li><a href="#tab-5" ><span>TAB 5</span></a></li>

          <li><a href="#tab-6" ><span>TAB 6</span></a></li>

          <li><a href="#tab-7" ><span>TAB 7</span></a></li>

          <li><a href="#tab-8" ><span>TAB 8</span></a></li>

     </ul>

        <div style="clear: both"></div>

</div>

- When you add a webpart to Tab 2 - 8 you will notice that each time the page refreshes it takes you back to Tab 1. 

- This will happen each time, but it does not affect what webpart you are working on. 

- So just because you clicked Modify Shared Webpart on tab 3 and it refreshes to Tab 1 does NOT mean you are editing the webpart in Tab 1.  

- You will notice that you can click on tab 3 and see that the webpart has the dotted lines indicating that it is being edited.