CODEWITHSUNDEEP
javascriptjqueryjquery-ui-tabs
markratledge
markratledge

Reputation: 17561

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(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?

Upvotes: 0

Views: 1823

Answers (2)

Andrew Whitaker
Andrew Whitaker

Reputation: 126082

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/

Upvotes: 1

Matt
Matt

Reputation: 7249

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.

Upvotes: 1

Related Questions