Css 单页菜单活动状态与悬停相同

我有一个单页网站，带有定制（简单）

ul

菜单

菜单项是基于图像的，如5个

li

，每个50px x 50px，每个

li

项具有不同的背景图像，当您将鼠标悬停在菜单项上时，背景图像会发生变化

喜欢

---

它工作得很好，但问题是它是一个单页站点，我希望当我浏览一个特定的部分时，该部分的菜单应该与悬停时的菜单相同，类似于活动图像。

使用JavaScript向元素添加，

.active

类，并修改css规则，如下所示

li#home {
    background: url(imagea.jpg);
}

li#home:hover, li#home.active{
    background: url(imagehover.jpg);
}

jQuery代码：

$("element").on('click', function (){
    $(this).addClass("active");
});

---

编辑：jQuery演示 HTML

CSS

---

我做了，看一看。

使用JavaScript向元素添加，

.active

类，并像这样修改css规则

li#home {
    background: url(imagea.jpg);
}

li#home:hover, li#home.active{
    background: url(imagehover.jpg);
}

jQuery代码：

$("element").on('click', function (){
    $(this).addClass("active");
});

---

编辑：jQuery演示 HTML

CSS

---

我做了，看一看。

探索javascript解决方案，因为您需要触发一个事件来应用更改，CSS不知道该事件（即：节进入视图并处于活动状态）何时触发。您应该在javascript中而不是在CSS中对此进行探索。探索javascript解决方案，因为您需要触发一个事件来应用更改，而CSS不知道该事件（即：节进入视图并处于活动状态）何时被触发。您应该使用Javascript而不是CSS来处理此问题。谢谢，这似乎是合乎逻辑的。我对Jquery不是很有经验。活动类将添加到ul？单击每个元素时，不应向其添加任何活动类。当节处于非活动状态时，应将其从元素中删除。如果您对jQuery缺乏经验，我将更新答案，使其更加详细。好吗？好的。Thanks@IrfanSaleem我添加了一个简单的例子和一把小提琴。谢谢，这似乎是合乎逻辑的。我对Jquery不是很有经验。活动类将添加到ul？单击每个元素时，不应向其添加任何活动类。当节处于非活动状态时，应将其从元素中删除。如果您对jQuery缺乏经验，我将更新答案，使其更加详细。好吗？好的。Thanks@IrfanSaleem我加了一个简单的例子和一把小提琴。

$('li.menuItem').click(function(){
    $('li.menuItem').removeClass('active')
    .filter(this).addClass('active');
})

li{
    color:blue;
    cursor:pointer;
}
li.active{
    color:red;
}