javascript - jQuery UI 选项卡 - 显示所有选项卡

Question

大家好。我看到另一篇关于使用特定 jQuery UI 选项卡一次打开所有选项卡内容的帖子。这或多或少是一个“显示全部”选项卡。它似乎对我不起作用。无论如何，我的页面结构如下所示:

<div id="tabs">

   <ul class="tabs-1">
   <li><a href="#tabs-1"> Some Tab </li>
   <li><a href="#tabs-2"> Some Tab </li>
   <li><a href="#tabs-3"> Some Tab </li>
   <li><a href="#"> Show All </li>
   </ul>



<fieldset id="tabs-1"> Content </fieldset>
<fieldset id="tabs-2"> Content </fieldset>
<fieldset id="tabs-3"> Content </fieldset>

</div>

这是我使用的 JavaScript，基于之前的示例:

var user_tabs = $("#tabs").tabs({
    select: function(event, ui) {
        if (ui.index == 3) {
            $("fieldset[id^=tabs-]").show();
        } else {
            $("fieldset[id^=tabs-]").hide();
            $(ui.panel).show()
        }
    }
});

我使用的选项卡已正确初始化，但“显示所有选项卡”根本不起作用

有什么想法吗？

Answer 1

首先，修复选项卡中的 html 代码。您缺少 </a>对于所有链接。

然后将最后一个标签更改为:

<li><a href="#tabs-4"> Show All </a></li>

添加另一个面板(可以为空):

<fieldset id="tabs-4"></fieldset>  

并将您的 javascript 更改为:

var user_tabs = $("#tabs").tabs({
    show: function(event, ui) {

        if (ui.index == 3) {

            $("fieldset[id^='tabs-']").removeClass('ui-tabs-hide');
            $("fieldset[id='tabs-4']").addClass('ui-tabs-hide');
        } 
    }
});

(请注意从 select 到 show 的变化)

示例:http://jsfiddle.net/niklasvh/km7Le/