Question

我的菜单是这样的：

<div id="header">
                          <div id="div-back" onClick="#">   </div>
                          <div id="div-origin" onClick="javascript:showmini('origin');">        </div>
                          <div id="div-profile" onClick="javascript:showmini('profile');">      </div>
                          <div id="div-affil" onClick="javascript:showmini('affil');">          </div>
                          <div id="div-combat" onClick="javascript:showmini('combat');">        </div>
                      </div>

它的CSS：

#div-back {background-image:url("http://www.stipz.50webs.com/elements/mp_onhover/nm_back.png"); width:77px; height:26px; display:inline-block; float:left;}
#div-back:hover {background-image:url("http://www.stipz.50webs.com/elements/mp_onhover/on_back.png");}
#div-back:active {background-image:url("http://www.stipz.50webs.com/elements/mp_onhover/ac_back.png");}

#div-origin {background-image:url("http://www.stipz.50webs.com/elements/mp_onhover/nm_origin.png"); width:176px; height:26px; display:inline-block;float:left;}
#div-origin:hover {background-image:url("http://www.stipz.50webs.com/elements/mp_onhover/on_origin.png");}
#div-origin:active {background-image:url("http://www.stipz.50webs.com/elements/mp_onhover/ac_origin.png");}

#div-profile {background-image:url("http://www.stipz.50webs.com/elements/mp_onhover/nm_profile.png"); width:183px; height:26px; display:inline-block;float:left;}
#div-profile:hover {background-image:url("http://www.stipz.50webs.com/elements/mp_onhover/on_profile.png");}
#div-profile:active {background-image:url("http://www.stipz.50webs.com/elements/mp_onhover/ac_profile.png");}

其他div ID的编码方式相似，请参阅下面的实时链接因为我的帖子被标记为垃圾邮件。

并且一次打开一个div

function showmini(holodisp) 
{
$('.holodata').each(function(index) 
{
if ($(this).attr("id") == holodisp) 
{
  $(this).fadeIn(500);
}
else 
{
$(this).fadeOut(600);
}
});
}

直播网页：website portion

编辑：菜单的每个项目都有3个图像用于其翻转效果（正常，悬停和Onclick）

我希望它做的行为是当用户点击某个项目时，它保留了悬停效果，添加活动类来更改背景图像属性似乎是要走的路，但是有4个具有不同背景图像的项目使我无法使用。

Answer 1

这个问题真的很难理解。你这样添加一个类：

<div id="div-back" class="myclassname" onClick="#">   </div>

您可以通过这种方式在CSS中设置类：

.myclassname { 
    background-color:#000000;
}

除此之外，我不明白你想做什么。

Answer 2

基本上，您需要动态地向导航div添加一个类（请考虑改进您正在使用的标记）。使用jQuery，这是一个起点：

$('#header > div').click(function() {
  $(this).addClass('active');
});

让.active等于div:active或div:hover样式。

当您点击其他div时，您将要删除之前class="active"的申请。

查看我的demo code可访问的，简单的标记，了解您正在构建的内容。

添加[活动类] - 具有不同图像的当前div的导航元素

2 个答案: