jQuery UI Tabs: show another div with each active tab
I'm using jQuery Tabs UI with standard the tabs structure ( http://jqueryui.com/demos/tabs/ ). I haven't included all the html here, as it's redundant if you're familiar with Tabs UI.
But in this case, what I need to do is show a different image for each active tab. I.e. a different image in #headerwrapper when #tabone is active and another when #tabtwo is active, etc. And ideally fade in/out those images with something like the fx opacity effect.
My tabs init looks like this:
var $tabs= $("#tabs").tabs({
});
It looks like I need to do this (according to Matt's answer, below) in order to find the active tab:
$('#tabs').tabs({
select: function开发者_如何学JAVA(event, ui) { .... });
But I've had no luck with Matt's answer.
This is the headerwrapper and image CSS:
#headerwrapper {
background: url(images/image.jpg) top center no-repeat;
height:88px;
}
Is it possible to show a different image for each tab and fx them (i.e., fx: {opacity: 'toggle'} ) as they change?
You could use data-*
attributes:
$("#tabs").tabs({
select: function($event, ui) {
/* Extract the image from the active tab: */
var img = $(ui.panel).data("image");
/* Animate the header out, set the background css, then animate back in: */
$("#headerwrapper")
.animate({ opacity: 'toggle' }, function() {
$(this).css("background-image", "url(" + img + ")")
.animate({ opacity: 'toggle' });
});
}
});
And each tab panel would have data-image
defined:
<div id="tabs-1" data-image="http://placekitten.com/g/300/88">...</div>
Here's a working example: http://jsfiddle.net/8muBm/2/
You can set the image itself. So depending on what tab you are on, you could rename the images as header0, header1, etc... You can use
$('#example').tabs({
select: function(event, ui) {
var selected = $('#example').tabs('option', 'selected');
$("#headerimg").attr("src", "/new/image/header" + selected + ".jpg");
}
});
Something like that should work. You can get the currently selected tab. Otherwise you can always use an if/else statement as well.
精彩评论