Search jQuery

jQuery Forum

jQuery UI - Tabs (Change background image)

in Using jQuery UI • 4 months ago

<div id="post-1">
<div id="content">
<div id="tabs">
<div id="Characters">
<ul>
<li><a href="#tabs-1">Character 1</a></li>
<li><a href="#tabs-2">Character 2</a></li>
<li><a href="#tabs-3">Character 3</a></li>
<li><a href="#tabs-4">Character 4</a></li>
</ul>
</div>
</div>
</div>
</div>

Hi!

I want to change the background of "post-1" when I click to a tab. If I click "tabs-1" the image has to be of Character 1, if I click "tabs-2" the image has to be of Character 2,...

Currently, when I click "tabs-1", <li> background-image changes, but the image can't be 100% height and width (like div "post-1"). I want to change div "post-1" background-image, not <li> background-image.

What do I've to do?

Replies(4)

kbwood.au

Re: jQuery UI - Tabs (Change background image)

4 months ago

Use the activate callback instead:

$(function() {
$('#tabs').tabs({activate: function(event, ui) {
var char = ui.newTab.index() + 1;
$('#post-1').css({backgroundImage: 'url(img/character' + char + '.jpg)'});
}});
});

bertuz

Re: jQuery UI - Tabs (Change background image)

4 months ago

Thanks kbwood.au!!! It worked!

When I click to a tab, it sets background-image to div "post-1", it's great! There's only a problem: when you open the website, there's no background-image until you click to a tab...

How can I set the "tabs-1" tab to default and active at the beginning?

kbwood.au