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/

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

Answer 3

在 jQuery 版本中，UI 1.12 事件更改為“beforeActivate”和“ui”並返回 arguments newTab

所以新的 function 看起來像：

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

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