JQuery - div和样式

时间:2009-10-01 14:37:52

标签: jquery html coding-style

下单             portfolie             往来             空缺             关于公司         

我在jquery-script中为它添加样式:

        $('#head_menu a').each(
            function()
            {
               $(this).addClass('menu_part'); 
            }
        )

样式 menu_part

.menu_part
{
    border-left: 1px solid black;
    background-image: url(../images/bg_menu.png);
    float:left;
    padding: 2px 10px;
}

现在,如果单击菜单的一部分,我想更改样式:

        $('#head_menu a').click(
            function(e)
            {
                $(this).removeClass('menu_part').addClass('menu_chose');
            });

menu_chose 样式:

 .menu_chose
    {
        background-image: url(../images/bg_menu_hover.png);                            
        color: #FFF;
    }

一切都很好,但点击后只有文字颜色变为白色,但背景图片仍旧,为什么?


UPD

图片路径是正确的。这是另一种风格:

.menu_part:hover
{
    background-image: url(../images/bg_menu_hover.png);
    color: #FFF;
}

当鼠标结束时,它的效果非常好。

1 个答案:

答案 0 :(得分:2)

首先,这段代码:

    $('#head_menu a').each(
        function()
        {
           $(this).addClass('menu_part'); 
        }
    )

可以简化为:

    $('#head_menu a').addClass('menu_part'); 

其次,从它的外观来看,你在你的点击事件处理程序中添加了类'menu_choosed',而你的样式表实际上有'menu_chosed'样式(只有一个'o')。如果您将两者都更改为'menu_chosen',问题应该会消失!