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 OnL开发者_JAVA百科ine</a>
</li>
<li>
<a href="#tabs-4">Preguntas Frecuentes</a>
</li>
</ul>
</div>
EDITED: Applying correct traversing on checking for correct children:
$("#menuContainer").find("a").each(function(){
$(this).hover(
function(){$(this).addClass("ui-state-hover");},
function(){$(this).removeClass("ui-state-hover");}
);
});
Test mockup on http://jsfiddle.net/myriad/EEW2m/
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
精彩评论