Question

at this link: http://jqueryui.com/demos/tabs/ when we look “view source”, we have:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">...</a></li>
        <li><a href="#tabs-2">...</a></li>
        <li><a href="#tabs-3">...</a></li>
    </ul>
    <div id="tabs-1">...</div>
    <div id="tabs-2">...</div>
    <div id="tabs-3">...</div>
</div>

so what I want to know, how to implement this with class instead of id,
considering this portion of code will be used multiple times that may be loaded ajax,
in different times.

Answer 1

for dynamically adding tabs, there is an add method that will auto-name your tab controls for you, thus letting you re-use your tab creation code repeatedly.

When a tab is added to the page, it fires the add event, as shown in the tabs doc page:

var $tabs = $('#example').tabs({
    add: function(event, ui) {
        $tabs.tabs('select', '#' + ui.panel.id);
    }
});

from http://jqueryui.com/demos/tabs/#default