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

为了动态添加标签，有一种添加方法可以为您自动命名标签控件，从而可以重复使用标签创建代码。

当一个标签添加到页面时，它会触发添加事件，如标签文档页面所示：

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

jquery accessor id vs class？

5 个答案: