Search code examples
jqueryjquery-uijquery-tabs

how can i get access to specifc tab in event create jquery


I need to make some changes in the tabs when the event it's create but i don't know how access of each tab inside of the event.

I tried like this but it doesn't work, i know that the problem it's the selector.

$("#menuContainer").tabs({
    selected : 1,
    create: function (event, ui){
        $(this).css('background','#54B2F1 url(images/ui-bg_glow-ball_75_53ade9_600x600.png) 50% 50% repeat-x');
    }
});

i'm also tried like this

$(ui.panel).css('background','#54B2F1 url(images/ui-bg_glow-ball_75_53ade9_600x600.png) 50% 50% repeat-x');

but the element ui doesn't have a value


Solution

  • The 'this' in you create handler refers to the div used as the tab control wrapper:

    <div class="ui-tabs" /> 
    

    So the code that you have posted should change the background of the that. If you want to style the individual tabs themselves you will need to do something like:

    $(this).find('.ui-tabs-nav li').css('background','#54B2F1 url(images/ui-bg_glow-ball_75_53ade9_600x600.png) 50% 50% repeat-x');
    

    The create trigger is fired when the whole tab control is created. I think in this case you are looking for an event that is triggered when an individual tab is created.