Question

I’m trying to figure out how to generate tabs like jQuery’s tabs plugin, but without the swapping of DIVs. In other words, I’d like a jQuery plugin that just draws the tab bar (and lets me specify which tab is selected). I’ll take care of drawing the content and having things happen when tabs are clicked.

Answer 1

All you have to do, is copy the classes that jQuery UI applies to the tabs, and you’re all set.

You’ll also then add/remove classes dynamically when the user clicks on one of them.

This is actually the way that jQuery UI does it with the tabs.

Here are some sample classes that they use:

ui-tabs ui-widget ui-widget-content ui-corner-all

I got these by inspecting the DOM after the jQuery UI has already applied the tabs functionality. Do the same, and you’ll see exactly what classes you need for which elements.

EDIT:

Here’s the complete HTML:

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all">
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#">The selected tab</a></li>
        <li class="ui-state-default ui-corner-top"><a href="#">Other tabs</a></li>
        <li class="ui-state-default ui-corner-top"><a href="#">Other tabs</a></li>
    </ul>
</div>

And here’s the Javascript:

$('.ui-tabs-nav li').mouseenter(function(){
    $(this).addClass('ui-state-hover');
})
.mouseleave(function(){
    $(this).removeClass('ui-state-hover');
})
.click(function(){
    $(this).addClass('ui-tabs-selected ui-state-active')
        .siblings().removeClass('ui-tabs-selected ui-state-active');

    return false;
});

And, of course, where would we be without the fiddle: http://jsfiddle.net/Bsa7J/ .