Question

I was just wondering about the best way to define a CSS rule for tabs. There are many methods online but I wanted to achieve it in the most efficient way. How do you go about doing this? My code is here: http://jsfiddle.net/mgd5P/

HTML

<ul id="tabs">
    <li><a href="#" title="tab1">TTS</a></li>
    <li><a href="#" title="tab2">PMW</a></li>  
</ul>

<div id="content"> 
    <div id="tab1">One - content</div>
    <div id="tab2">Two - content</div>
</div>​

JS

$(document).ready(function() {
    $("#content div").hide(); // Initially hide all content
    $("#tabs li:first").attr("id","current"); // Activate first tab
    $("#content div:first").fadeIn(); // Show first tab content

    $('#tabs a').click(function(e) {
        e.preventDefault();        
        $("#content div").hide(); //Hide all content
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
    });
})();​

Answer 1

Here is a pure CSS approach to making tabs (learnt this at csstricks)

1. Use radio buttons as your tab menu
2. Use the :checked hook to style the selected tab’s content as displayed
3. Hide the actual radio buttons and style their labels as the tabs. Clicks on the label affect the control specified in the for attribute, so clicking the tabs still affects the radio buttons.

Here is a demonstration: http://jsfiddle.net/abwyU/