1

我有一个侧边栏菜单，并且使用 js 代码活动项具有不同的背景和字体颜色。它可以工作，但是在单击任何项​​目后，下面标记为line x- 的 css 行不再起作用。为什么会丢失。在 js 代码中我根本没有触及:hover状态？

<div id="divL">
<div id="sky">SKY</div>
<div id="sea">SEA</div>
<div id="universe">UNI-VERSE</div>
</div>

css 

#divL  div{
    margin:3px 0;
    padding:5px 14px;
    cursor:pointer;
}
#divL div:first-of-type {
  background:#ffffff;
    color:#008080;
}
#divL div:hover{  // line x
    background:#ffffff;
    color:#008080;
}

JS 

$("#divL div").click(function () {
$('#divL div').css({'background':'#008080', 'color':'#ffffff'})
$(this).css({'background':'#ffffff', 'color':'#008080'})
});
4

1 回答 1

3

您的 jQuery 代码正在更改内联样式并覆盖您的 CSS 文件样式。

正如文档中指出的那样：

当使用 .css() 作为 setter 时，jQuery 会修改元素的 style 属性。

您的代码导致：

<div id="universe" style="background-color: #fff; color: rgb(0, 128, 128); background-position: initial initial; background-repeat: initial initial;">UNI-VERSE</div>

我建议您使用另一种样式，而不是使用 jQuery 更改内联样式。您可以使用 jQuery addClass()，removeClass()甚至可以使用toggleClass()jQuery 的功能。

现场演示：http: //jsfiddle.net/uUDeS/1/

jQuery：

$("#divL div").click(function () {
    $(this).siblings().removeClass('active').addClass('inactive');
    $(this).addClass('active')
});

CSS：

#divL div.inactive {
    background:#008080;
    color:#fff;
}
#divL div.active {
    background:#fff;
    color:#008080;
}
于 2013-09-16T16:01:50.273 回答