jQuery UI 选项卡 - 显示所有选项卡答案

【问题标题】：jQuery UI Tabs - Show all TabjQuery UI 选项卡 - 显示所有选项卡
【发布时间】：2011-06-03 14:21:55
【问题描述】：

大家好。我看到另一篇关于使用特定 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()
        }
    }
});

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

有什么想法吗？

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-tabs

【解决方案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/

【讨论】：

像魅力一样工作 - 非常感谢 Niklas - 我真的很感激！
知道如何在 jquery ui 1.9 中使用它吗？由于 ui-tabs-hide 已被删除，它会中断。

【解决方案2】：

这适用于 jQuery-ui-1.10.0（对我而言）。请注意，我使用的是 div，而不是问题中的字段集。

//Do the tabs
$('#tabs').tabs({
    activate: function (event, ui) {
        if (ui.newPanel.selector == "#tabs-4") {
            $("div[id^='tabs-']").attr('style', "display:block;");
            $("div[id^='tabs-']").attr('aria-expanded', true);
            $("div[id^='tabs-']").attr('aria-hidden', false);
        }
        else {
            $("div[id^='tabs-']").attr('style', "display:none;");
            $("div[id^='tabs-']").attr('aria-expanded', false);
            $("div[id^='tabs-']").attr('aria-hidden', true);
            $(ui.newPanel.selector).attr('style', "display:block;");
            $(ui.newPanel.selector).attr('aria-expanded', true);
            $(ui.newPanel.selector).attr('aria-hidden', false);
        }
    }
});

【讨论】：

谢谢。我注意到 1.9+ 使用自定义属性来确定是否显示选项卡。

【解决方案3】：

在 jQuery UI 1.12 版本中，事件更改为 'beforeActivate' 和 'ui' 并返回参数 newTab

所以新函数看起来像：

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

        if (ui.newTab.find('a').attr('href') === '#tabs-4') {

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

【讨论】：

【解决方案4】：

在 JQuery UI Tabs 1.12.1 中，这可以完美运行：

var user_tabs = $("#tabs").tabs(
    {activate: 
        function(event, ui) {
            if ( ui.newTab.find('a').attr('href') === '#tabs-4') {
                $("div[id^='tabs-']").show();
            }
        }
    }
)

【讨论】：