JQuery ui tabs using class selector

Question

In jquery ui demo, id selectors are used to link to a specific tab, which work fine in links, since "#" denotes the anchor in the link.

However, I want to create several tabs and associate them with the corresponding tabs using the class selector.

<div class="accordion">
    <h3>Product x</h3>
    <div class="tabs">
        <ul>
            <!-- .tabs-0 & .tabs-1 don't work, since they are not a valid url -->
            <li><a href=".tabs-0">General product info</a></li>
            <li><a href=".tabs-1">End user info</a></li>
        </ul>
        <div class="tabs-0">
            general info for product x.
        </div>
        <div class="tabs-1">
            end user info product x.
        </div>
    </div>
</div>
<div class="accordion">
    <h3>Product y</h3>
    <div class="tabs">
        <ul>
            <!-- .tabs-0 & .tabs-1 don't work, since they are not a valid url -->
            <li><a href=".tabs-0">General info</a></li>
            <li><a href=".tabs-1">End user info</a></li>
        </ul>
        <div class="tabs-0">
            general info for product y.
        </div>
        <div class="tabs-1">
            end user info product y.
        </div>
    </div>
</div>

Here it is what I tried in jsfidlle and here how each panel should look!

So the question is, how can I refer to tabs by class name?

Answer 1

<li><a href=".tabs-0">General product info</a></li>
<li><a href=".tabs-1">End user info</a></li>

. class a. id s.

Answer 2

, $(".tabs, .tab1"). , , !

    <div class="accordion">
        <h3>Product x</h3>
        <div class="tabs">
            <ul>
                <li><a href="#tabs-0">General product info</a></li>
                <li><a href="#tabs-1">End user info</a></li>
            </ul>
            <div id="tabs-0">
                general info for product x.
            </div>
            <div id="tabs-1">
                end user info product x.
            </div>
        </div>
    </div>

    <div class="accordion">
        <h3>Product y</h3>
        <div class="tab1" >
            <ul>            
                <li><a href="#tab1-0">General info</a></li>
                <li><a href="#tab1-1">End user info</a></li>
            </ul>
            <div id="tab1-0" >
                general info for product y.
            </div>
            <div id="tab1-1" >
                end user info product y.
            </div>
        </div>
    </div>

Script:

$(".tabs, .tab1").tabs();

: http://jsfiddle.net/S74p8/4/

Answer 3

I ended up with this :

HTML:

<div class="accordion">
    <h3>Product x</h3>
    <div class="tabs">
        <ul>
            <!-- .tabs-0 & .tabs-1 don't work, since they are not a valid url -->
            <li><a href="" class="tabpanellink">General product info</a></li>
            <li><a href="" class="tabpanellink">End user info</a></li>
        </ul>
        <div class="tabpanel">
            general info for product x.
        </div>
        <div class="tabpanel">
            end user info product x.
        </div>
    </div>
</div>
<div class="accordion">
    <h3>Product y</h3>
    <div class="tabs">
        <ul>
            <!-- .tabs-0 & .tabs-1 don't work, since they are not a valid url -->
            <li><a href="" class="tabpanellink">General info</a></li>
            <li><a href="" class="tabpanellink">End user info</a></li>
        </ul>
        <div class="tabpanel">
            general info for product y.
        </div>
        <div class="tabpanel">
            end user info product y.
        </div>
    </div>
</div>

JQuery

$(".tabpanellink").each(
    function(uniqueindex){
        $(this).attr('href', '#tab-' + uniqueindex);
    }
);
$(".tabpanel").each(
    function(uniqueindex){
        $(this).attr('id', 'tab-' + uniqueindex);
    }
);

$(".accordion").accordion({
    collapsible: true,
    active: false
});
$(".tabs").tabs();