Goal: Produce a simple, small script which gracefully degrades without JavaScript.
Note: The HTML below is pulled from a Zope Page Template (with embedded Python), but the code should be easy to dissect.
HTML
<div id="tabbed-content" tal:define="currentTab request/tab|string:cabinets">
<div class="tabs-wrapper">
<ul class="tabs">
<li tal:attributes="class python: test(request.get('tab','') in ['cabinets', ''], 'selected', '')">
<a href="?tab=cabinets#content" id="tab-cabinets">Cabinets</a>
</li>
<li tal:attributes="class python: test(request.get('tab','') == 'gallery', 'selected', '')">
<a href="?tab=gallery#content" id="tab-gallery">Gallery</a>
</li>
<li tal:attributes="class python: test(request.get('tab','') == 'specs', 'selected', '')">
<a href="?tab=specs#content" id="tab-specs">Specifications</a>
</li>
</ul>
<div class="visualClear"><!-- --></div>
</div>
<div id="cabinets" class="tab-body" tal:attributes="class python: test(currentTab == 'cabinets', 'tab-body', 'tab-body initial-hide')">
content here...
</div>
<div id="gallery" class="tab-body" tal:attributes="class python: test(currentTab == 'gallery', 'tab-body', 'tab-body initial-hide')">
content here...
</div>
<div id="specs" class="tab-body" tal:attributes="class python: test(currentTab == 'specs', 'tab-body', 'tab-body initial-hide')">
content here...
</div>
</div>
CSS
.tabs-wrapper { margin-bottom: 1em; border-bottom: 1px solid #bbb; }
.tabs { margin: 0 !important; padding: 7px 0 0 8px; list-style-type: none; list-style-image: none; }
.tabs li { float: left; display: block; margin: 0 5px -1px 0; padding: 0; font-size: 12px; }
.tabs li a { padding: 3px 8px 1px 8px; font-weight: bold; color: #444 !important; outline: none !important;
border: 1px solid #e0e0e0; border-radius: 5px 5px 0 0; background: #e0e0e0; }
.tabs li.selected { position: relative; margin-top: -2px; top: 2px; }
.tabs li.selected a { padding-bottom: 3px; border: 1px solid #bbb; border-bottom: 0; background: #fff; }
.initial-hide { display: none; }
.visualClear { clear: both; }
jQuery
$('.tabs a').click(function() {
var activateId = jq(this).attr('id').substring(4); // get id of tab "body"
$(this).parent().siblings().removeClass('selected');
$(this).parent().addClass('selected');
$(this).parent().parent().parent().siblings().hide(); // hide all tab bodies
$('#' + activateId).show(); // show only the selected tab body
return false;
});