Completely Unobtrusive jQuery Tabs

By Andreas Lagerkvist

I wasn't happy with how the tabs()-plugin for jQuery worked, don't get me wrong, it's an amazing plug-in, but to me it seemed the unordered list you had to put in the top was completely unnecessary if javascript was disabled. So i though, fuck, I'll _generate_ the list from javascript.

So here you have it, a completely unobtrusive tabs-plugin (that uses the normal tabs()-plugin).

The titles in the tabs are generated from:

  1. The title-attribute of the div it is pointing to
  2. Or, the first heading in the div
  3. Or, the id of the div, strreplaced so it looks a bit nicer (this asumes you use foo-bar syntax for naming IDs and classnames)

The list is automatically inserted before the FIRST tab-content (the first div)

Recent Articles

  1. CSS Wish List
  2. Satan Golga 2
  3. O'Sullivan's Ameezing 147
  4. Fade an Entire Design Using jQuery
  5. A Really Old School Design
  6. Major Back-End Update

Recent Comments

  1. On Fade an Entire Design Using jQuery by Andrew
  2. On O'Sullivan's Ameezing 147 by makka
  3. On Guest Book by Lunk!
  4. On The Ultimate Website Pt. 1 by Tobiiazz
  5. On The Ultimate Website Pt. 1 by klitoria
  6. On The Ultimate Website Pt. 1 by Ante

Style Switcher

The style switcher allows you to change the look and feel of exscale.se.
Only CSS and JavaScript are changed. The XHTML stays the same.


For more information about the styles, check the styles page.

Recent Images

Top Rated Articles

  1. Some Flash Stuff (5)
  2. XLNT Catering (5)
  3. Include Kukk (5)
  4. Satan Golga 2 (5)
  5. Google Start Page Valid and Strict (4.5)
  6. Lamp & Mates (4.4)

Answer this!

Which "sub-content"-widget do you think is most interesting / use the most?

Blog Roll (25%)

Most Popular Articles (0%)

Recent Articles (0%)

Recent Comments (0%)

Recent Images (0%)

Search (0%)

Style Switcher (75%)

This Poll (0%)

Top Rated Articles (0%)

Blog Roll