Question

我有一个列表，当我将鼠标悬停在每个孩子身上时，我需要更改UL的背景图像。我已经使用the code here完成了此操作（此处我使用的是颜色而不是背景图片）。

现在，如果我点击第1项，那就是“活跃的”＆＃39;当我被带到.page-1时，它会动态地添加到它中。在这里，我需要背景来显示相应的图像（或黄色，根据示例）。我试过CSS：

.page-1 #menu {
    background-color: yellow;
}

但是当我将鼠标悬停在其他物品上时，颜色会消失。我想我应该使用.hasClass方法，但我对jQuery并不擅长，所以我无法完全理解它。

非常感谢任何帮助。

Answer 1

现在我想我有一个解决你问题的方法......

为item-1，item-2和item-3创建三个不同的 html 文件如果您点击第1项....然后将第1项文件中ul的内联样式更改为...

<ul id="menu" style="background-color:yellow">

</ul>

如果你想用jquery

做

参加三个班级

.item1background{
    background-color:yellow;  
 }
.item2background{
    background-color:gray;  
 }
.item1background{
    background-color:pink;  
 }

现在，只要有人点击某个项目，我们就会动态添加上述类别中的一个。

$("#menu .item_1").click(function(){
    $("#menu").addClass("item1background");
});

你可以为其余的iem＆＃39>做同样的事情

您可以详细了解addClass()方法@ http://www.w3schools.com/jquery/jquery_css_classes.asp

Answer 2

您可以同时使用样式和类属性。 style属性将覆盖class属性的颜色。

<ul id="menu" style="background-color:yellow" class="pink">

在悬停事件中，您只需将类添加到#menu，在点击事件中您只需更改#menu的样式。

$('.item_1').hover(function() {
    $('#menu').addClass('yellow');
}, function() {
    $('#menu').removeClass('yellow');
});

$('.item_1').click(function() {
    $('#menu').css('background-color', 'yellow');
    return false;
});

以下是示例JSFiddle

Answer 3

在您的评论中，您说会转到另一个页面，然后我相信您无法通过更改background-color的{{1}}来获得您想要的内容jQuery的。刷新/重新加载页面时，您使用#menu执行的每个操作都将被删除，因为您的页面只是将所有内容重置为默认状态..

我能提出的唯一解决方案是使用HTML5 LocalStorage保存您的jQuery颜色，如下所示：

ul

通过这样做，每次重新加载页面时，都需要检查localStorage以获取// Store localStorage.setItem("lastname", "Smith"); // Retrieve document.getElementById("result").innerHTML = localStorage.getItem("lastname");的最新颜色。

当li处于悬停或活动状态时更改ul背景

3 个答案: