JQuery ui tabs using class selector

In the jquery ui demo, in order to link to a certain tab, id selectors are used, which works fine in links since '#' stands for an anchor in a link.

However I want to create multiple tabpanels and link to the correct 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 is what I tried in jsfidlle and here is how each panel should look like!

So the question is how do I link to the tabs by class name?

Answers


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

The problem lies in the above code. You can't use class for hyper-linking the a tag. So change to ids.


Try this, You can use $(".tabs, .tab1") selectors. Every section need unique id so that it can able to show or hide that respective section, else it couldn't able to select!

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

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


In the end I came 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();

Need Your Help

High Memory Usage Using Python Multiprocessing

python performance memory multiprocessing

I have seen a couple of posts on memory usage using Python Multiprocessing module. However the questions don't seem to answer the problem I have here. I am posting my analysis with the hope that so...

reference different workbooks worksheets using object variables The workbook is already open

excel vba variables object

I'm pounding my head against the wall with this. I've been writing the full workbooks().sheets() references. Looking for a shorter way to do it I found some stackoverflow posts and answers that see...