Question

我猜测jQuery对哪个列表属于tabs元素感到困惑。当我将列表附加到幻灯片，然后销毁并重新应用选项卡时，tabs元素会完全中断。

点击＆＃39; DESTROY AND RESTART＆＃39;选项卡按钮，您将看到标签被销毁并重新应用没有问题。然后点击“添加列表到第一张幻灯片”，然后点击“DESTROY AND RESTART＆＃39;再次，您可以看到标签完全断开。

$.widget( "custom.tabs", $.ui.tabs, {
    _getList: function() {
        var list = this.element.find( "ul.tabs-nav" );
        return list.length ? list.eq( 0 ) : this._super();
    }
});

我无法找到直接选择标签导航元素的方法。我认为jQuery选择它找到的第一个列表并将其设置为选项卡。如何在首次找到不同的列表时阻止jQuery中断？

编辑：尽管我不知道如何实现，但仍然在选项卡文档中进行此操作。 http://api.jqueryui.com/tabs/#method-_getList

固定IT：显然jQuery UI允许你扩展小部件，所以我使用_getList让标签只使用特定类的导航。

test.dev

Answer 1

看起来问题是列表元素的顺序 - 您的第一组UL位于底部。我认为这是因为你想将标签置于底部。如果是这种情况，check out this post使用CSS将标签移动到容器的底部以避免此问题。

如果您没有故意这样做并希望选项卡位于顶部，只需移动容器上方的选项卡UL，其中包含您附加的详细信息。

所以基本上它可以在HTML结构化的时候起作用。

<div class="tabs-element">
        <ul class="tabs-nav">
            <li><a href="#slider-1-tab-1">ONE</a></li>
            <li><a href="#slider-1-tab-2">TWO</a></li>
            <li><a href="#slider-1-tab-3">THREE</a></li>
        </ul>
        <div class="container">
            <div id="slider-1-tab-1">ONE</div>
            <div id="slider-1-tab-2">TWO</div>
            <div id="slider-1-tab-3">THREE</div>
        </div>
    </div>

Answer 2

这里的问题似乎是destroy方法在错误的列表上运行，所以你必须更具体地说明被破坏的内容。在刷新选项卡之前，我想出了一些可以通过删除列表子项来实现的功能。可能不是你想要的，但它确实有效。

http://codepen.io/anon/pen/KVzxmb

HTML：

<button id="restart">DESTROY AND RESTART TABS</button>
<button id="add-list">ADD LIST TO FIRST SLIDE</button>
<hr/>

<div class="tabs-element">
        <div class="container">
            <div class="tab" id="slider-1-tab-1">ONE:</div>
            <div class="tab" id="slider-1-tab-2">TWO:</div>
            <div class="tab" id="slider-1-tab-3">THREE:</div>
        </div>
        <ul class="tabs-nav">
            <li><a href="#slider-1-tab-1">ONE</a></li>
            <li><a href="#slider-1-tab-2">TWO</a></li>
            <li><a href="#slider-1-tab-3">THREE</a></li>
        </ul>
    </div>

和脚本：

$(".tabs-element").tabs();

$("#restart").on("click", function() {
    $(".tab").children().empty();
    $(".tabs-element").tabs();
});

$("#add-list").on("click", function() {
    $("#slider-1-tab-1").append("<ul><li>new list</li><li>new list</li><li>new list</li></ul>");
});

Answer 3

好的，所以我相信这就是你要找的东西。为了做你想做的事，你需要3个方法

保存标签页的内容
清除标签页的内容
在销毁并重新创建选项卡后恢复选项卡的内容。

在销毁标签之前，需要完成前两个。重新创建选项卡后，最后一步即可完成。所以你的点击处理程序现在看起来像这样：

$("#restart").on("click", function() 
{
   saveTabData();
   clearTabData();
   $(".tabs-element").tabs("destroy");
   $(".tabs-element").tabs();
   restoreTabData();
});

这三种方法是：

var saveTabData  = function() {
 $(".container > div").each(function() { 
         tabData.push({
             tab_id: $(this).attr("id"),
             tab_val: $(this).html()
         });
    });
  };

var clearTabData = function() {
   $(".container > div").each(function() {
    $(this).html("");
   })
};

var restoreTabData = function() {
    $.each(tabData, function(key, value){
    $("#" + value.tab_id).html(value.tab_val);
  });
}

以下是Code Pen

当theres子列表时，jQuery UI选项卡会中断

3 个答案: