开发者

adding style to the header of the tab jquery

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜