i'm trying to adding style only to the headers of the tab, my goal it's that i want that the class that appears in the event hover remains until the user change the tab. i tried like this
$("#menuContainer").tabs();
$("#menuContainer").bind('tabsselect',function (event,ui){
$(this).addClass("ui-state-hover");
});
but when i do that i change the background of all tab and i just want change the header not all the div.
Thanks for your time.
UPDATE
My html
<div id="menuContainer">
<ul id="menuPrincipal">
<li>
<a href="#tabs-1">Quienes Somos</a>
</li>
<li>
<a href="#tabs-2">Catalogo de Repuestos</a>
</li>
<li>
<a href="#tabs-3">Cotizacion OnLine</a>
</li>
<li>
<a href="#tabs-4">Preguntas Frecuentes</a>
</li>
</ul>
</div>
Finnally i could it make it to change style of a tab you need attach the right event and using the correct object like this
$("#menuContainer").bind('tabsshow',function (event,ui){
$(ui.tab).parent().removeClass('ui-state-active');
$(ui.tab).parent().css('border','1px solid #072fc5');
});
Notes that i remove the class ui-state-active
for adding my style
Also it's important the event associate it has to be tabsshow
because in the event tabselected
the class ui-state-active it's not yet adding to the tab