jquery-ui tabs - 在同一页面上多次使用

Question

我正在使用jquery-ui来实现标签。

但是，我需要在同一页面上使用多个。

但是jquery使用id“tabs”（而不是类或其他东西），所以它只适用于第一个实例。

Answer 1

您可以更改标签前缀吗？

$( ".selector" ).tabs({ idPrefix: 'ui-tabs-primary' });

除此之外，似乎work for me开箱即用。

Answer 2

另一种方式是：

  $(document).ready(function() {
    $("#tabs1").tabs();
    $("#tabs2").tabs();

  });

Answer 3

也许不是最好的方式，但我为两个标签工作

第一个标签

   $(function(){
     var options = {
 event:'mouseover',
 selected:0
     };
     $("#tabs").tabs(options);
   });

<div id="tabs">.....</div>

---

第二个标签

$(function(){
     var options = {
 event:'mouseover',
 selected:0
     };
     $(".tabs").tabs(options);
   });
<div class="tabs">.....</div>

Answer 4

$(document).ready(function()
    $("#tabs1, #tabs2").tabs();
});

Answer 5

$(document).ready(function()
    $("#tabs1, #tabs2").tabs();
});

它完美无缺！您可以添加所需的选项卡。

$( "#tabs, #tabs1, #tabs2" ).tabs();

非常感谢user3152277！