jquery accessor id vs class？

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事件，如选项卡文档页面中所示：

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

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

Answer 2

jquery ui tab控件需要唯一地标识和访问这些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。

Answer 4

不幸的是，与jquery ui相关联的内置选项卡基于id以静态方式编码。

当你将div变成jqueryui选项卡时，它在幕后做了很多工作。

选项卡本身中链接的href属性被编码以查找特定内容div。 因此，href =“＃tab-1”将始终显示id为“＃tab-1”的div。

这就是它的工作原理。 如果要使用该类，则必须在jqueryui库中修改/扩展jquery ui选项卡功能。 或者你可以编写自己的Jquery选项卡插件。

Answer 5

您可以使用addClass方法

$('#some_ul_id li').addClass(function(i, curr) {
  return "item-" + i;
});