Defining CSS rule for tabs

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 }); })();

Your fiddle was not properly showing tabs because it does not include the jquery ui which is separate from the standard jquery framework. When you include the ui, it will bring its own styling depending on which theme you picked. If you need to override the standard jquery styling, use firebug to see what classes are applied and remove or override them — WebChemist
– WebChemist, Commented Dec 1, 2012 at 12:25
@WebChemist I don't want to use jQuery UI I want to style my own from scratch — methuselah
– methuselah, Commented Dec 1, 2012 at 12:34
So you want to reinvent the wheel? Why do that when the ui package will handle the js functionality of making the tabs actually work, then you just override the ui theme css as needed. — WebChemist
– WebChemist, Commented Dec 1, 2012 at 12:38
Yes, @WebChemist is right. No need to work hard on something which is already working. You just need to modify the jquery ui css as per your requirements. jsfiddle.net/dZySA That's it ;) — palaѕн
– palaѕн, Commented Dec 1, 2012 at 12:42

user1726343 · Accepted Answer · 2012-12-01 12:46:58Z

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

Use radio buttons as your tab menu
Use the :checked hook to style the selected tab's content as displayed
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/

Collectives™ on Stack Overflow

Defining CSS rule for tabs

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related