jquery访问器id vs类？

Question

在这个链接上：http://jqueryui.com/demos/tabs/当我们查看“查看源代码”时，我们有：

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

所以我想知道的是，如何使用class而不是id来实现它，

考虑到这部分代码将被多次使用，可以加载ajax，

在不同的时代。

Answer 1

对于动态添加选项卡，有一个add方法可以为您自动命名选项卡控件，从而允许您重复使用选项卡创建代码。

当选项卡添加到页面时，它会激发add事件，如tabs文档页面中所示：

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

来自http://jqueryui.com/demos/tabs/#default

Answer 2

jquery ui选项卡控件需要唯一地标识和访问这些div，因此不能选择类。只需确保在向客户端提供html之前提供唯一的id即可。

您可以在页面上有多个选项卡控件，而不会出现问题。

<script>
   $(function() {
     $( "#tabs" ).tabs();
     $( "#tabs2" ).tabs();
   });
   </script>

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

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

Answer 3

这根本是不可能的。

链接锚与ID一起工作，ID必须是唯一的。

如果您有多个具有相同类的选项卡(按钮相同)，那么当您单击一个按钮时，应该打开哪些选项卡？我怀疑你会回答“全部”。

如果是样式问题(css)，您应该只添加一个带有id的类。