Question

在jquery ui演示中，为了链接到某个标签，使用id选择器，这在链接中工作正常，因为'＃'代表链接中的锚点。

但是我想创建多个tabpanel并使用类选择器链接到正确的选项卡。

<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是我在jsfidlle中尝试过的，而here是每个小组的样子！

所以问题是如何按类名链接到标签？

Answer 1

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

问题出在上面的代码中。您can't use class用于超链接a标记。所以改为id s。

Answer 2

试试这个，您可以使用$(".tabs, .tab1")选择器。每个部分都需要唯一的ID，以便能够显示或隐藏相应的部分，否则无法选择！

    <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>

脚本：

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

演示： http://jsfiddle.net/S74p8/4/

Answer 3

最后我想出了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();

使用类选择器的JQuery ui选项卡

3 个答案: