jQuery UI选项卡-显示所有选项卡 [英] jQuery UI Tabs - Show all Tab

问题描述

大家好.我看到了另一篇有关使用特定jQuery UI选项卡一次打开所有选项卡内容的文章.这或多或少是全部显示"标签.它似乎对我不起作用.无论如何，我的页面结构看起来像这样:

Hey everyone. I saw another post on using a specific jQuery UI tab to open all tab content at once. This is more or less a "show all" tab. It doesn't seem to be working for me. In any event, my page structure looks like this:

<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:

This is the JavaScript that I have used, based on a previous example:

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

我使用的标签页已正确初始化，但是显示所有标签页"根本不起作用

The tabs that I use have initialized correctly, but the "show all tab" doesn't work at all

有什么想法吗?

推荐答案

首先，修复标签中的html代码.您缺少所有链接的</a>.

Firstly, fix the html code within your tabs. You are missing the </a> for all the links.

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

Then change your last tab to:

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

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

add another panel (can be empty):

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

然后将您的JavaScript更改为此:

And change your javascript to this:

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 )

(Note the change from select to show)

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

这篇关于jQuery UI选项卡-显示所有选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！