kuujinbo_dot_info

Updated 2010-10

jQuery Tabs was originally a Plugin written by Klaus Hartl. Sometime after jQuery UI was born the plugin was unfortunately incorporated into jQuery UI. IMHO jQuery UI is bloated, so I recently upgraded to jQuery Tools tabs. Will write a tutorial on that soon, stay posted. In the meantime I'll keep this page for historical purposes, since there seems to still be a lot of traffic coming here, even though this page is over three and a half years old as of October 2010. In other words, this page is extremely dated.

Simple Steps

  1. Download package
  2. Link the following files in the HEAD section of your document: (a) jquery-1.1.2.pack.js, (b) jquery.history_remote.pack.js, (c) jquery.tabs.pack.js, (d) jquery.tabs.css, and (e) jquery.tabs-ie.css.
  3. Add one line of code to jQuery's ready event.
  4. Write the HTML that builds the tabs.
  5. Copy the two graphics files, "loading.gif" & "tab.png" from the download package to the same directory you placed the CSS files listed above.
  6. Create the separate HTML (fragment) files that are being requested by the Ajax call for each tab.

Steps 1, 2 and 5 are self explanatory. Step 3 is pretty simple too, one line of code in the HEAD section of your document that sets a boolean option

"indicating that tab content has to be loaded remotely from the url given in the href attribute of the tab menu anchor elements"
or, in other words, issues a XMLHttpRequest: 
<script type='text/javascript'>
$(function() { $('#navtabs').tabs({remote:true}); });
</script>

For step 4 create: (1) a DIV container with an id attribute the same as the element selector in step 3, and (2) an unordered list within the container with each listitem's hyperlink set to a separate URL containing the tab content: 

<!-- 
  id attribute for the DIV container MUST be the same
  as the element selector in step 3 above: 'navtabs'
--> 
<div id='navtabs'>
<ul>
<li><a href='code_ajax.html'><span>Ajax</span></a></li>
<li><a href='code_asp.net.html'><span>ASP.NET</span></a></li>
<li><a href='code_cs.html'><span>C#</span></a></li>
<li><a href='code_database.html'><span>Database</span></a></li>
<li><a href='code_sqlite.html'><span>SQLite</span></a></li>
</ul>
</div>

Finally, in step 6 create separate HTML files for each of the list items/tabs above. The files do not need to contain a complete HTML document, just the HTML content you want displayed, e.g. the Ajax page HTML fragment. (look at the HTML source) The working example.