Question

So I’m working with jQuery UI and the tabs widget.
As I am using those widgets in several places on the website I’m making, I take only the bare minimum from the default styling of jQuery UI, and make different styles for the different sets of tabs I have.

I usually have an architecture similar to this one:

<div id="smth-tabs">
    <ul id="smth-tabs-menu">
        <li> ....
    </ul>
    <div class="smth-tabs"> //First tab
    </div>
    ....
</div>

Now the problem is that, when I use AJAX to load the tabs (rather than having them in divs like in the example I gave), the div containing the tab is automatically generated, and has therefore only the classes of the widget (“ui-tabs-panel” and such).

Here is the code with which I am creating this AJAX based set of tabs:

$(function() {
    $( "#smth-tabs" ).tabs({
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "Error" 
                );
            }
        }
    });
});

Is there option to pass to the tabs function to set a custom class on the tab container?
Or is there another way to do it?
Or must I simply resolve to adding the class to the loaded tab in case of success of the AJAX request?

Thanks in advance.

Answer 1

You can style #smth-tabs .ui-tabs-pane or even #smth-tabs > ul and #smth-tabs > div.