我在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;
}
当鼠标结束时,它的效果非常好。
答案 0 :(得分:2)
首先,这段代码:
$('#head_menu a').each(
function()
{
$(this).addClass('menu_part');
}
)
可以简化为:
$('#head_menu a').addClass('menu_part');
其次,从它的外观来看,你在你的点击事件处理程序中添加了类'menu_choosed',而你的样式表实际上有'menu_chosed'样式(只有一个'o')。如果您将两者都更改为'menu_chosen',问题应该会消失!