jQuery UI Tabs - Show all Tab
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>开发者_如何学JAVA;
</ul>
<fieldset id="tabs-1"> Content </fieldset>
<fieldset id="tabs-2"> Content </fieldset>
<fieldset id="tabs-3"> Content </fieldset>
</div>
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
Any ideas?
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>
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');
}
}
});
(Note the change from select
to show
)
Example: http://jsfiddle.net/niklasvh/km7Le/
This works (for me) in jQuery-ui-1.10.0. Note that I use divs, not fieldsets as done in the question.
//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);
}
}
});
In version jQuery UI 1.12 event changed to 'beforeActivate' and 'ui' and returns arguments newTab
So new function will look like:
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');
}
}
});
In JQuery UI Tabs 1.12.1, this works perfectly:
var user_tabs = $("#tabs").tabs(
{activate:
function(event, ui) {
if ( ui.newTab.find('a').attr('href') === '#tabs-4') {
$("div[id^='tabs-']").show();
}
}
}
)
精彩评论