Question

【JS】单击导航背景改变，直到单击另一个导航背景恢复？

导航默认是这样的：

单击一个导航时改变背景：

我希望这个黄色的背景可以在我单击这个链接后一直保持，直到我单击另一个导航，目前的导航我用CSS做的，只有鼠标在上面时才是黄色背景，鼠标移开就恢复了。我该怎么改？
看来是我描述的不清楚，我希望的是当我停留在这个页面时，对应的导航一直是黄色，当我单击别的链接时，背景才恢复





Answer 1

使用jquery做比较简单
<style type="text/css">
ul
{
list-style: none;
}
ul li
{
float: left;
height: 32px;
line-height: 32px;
margin: auto 5px;
list-style: none;
text-align: center;
vertical-align: middle;
white-space: nowrap;
background-color: Gray;
color: White;
width: 50px;
}
.aCss, ul li:hover
{
background-color: Red;
}
</style>
<ul id="myDiv">
<li>a</li>
<li>b</li>
</ul>
<script type="text/javascript">
$("li", $("#myDiv")).each(function () {
var liJQ = $(this);
liJQ.bind("click", function () {
var thisJQ = $(this);
$("#myDiv").find("li").removeClass("aCss");
thisJQ.addClass("aCss");
});
});
</script>

Answer 2

使用js的onclick事件。
假设你这三个都是div，并有一个class为myDiv
$('.myDiv').click(function() {
var _self = this;
$('.myDiv').each(function() {
if(this === this) {
this.style.backgroundColor = 'yellow';
} else {
this.style.backgroundColor = 'pink';
}

});
});

Answer 3

单独写一个css:
.active{background:#xxx}
点击之后先所有都
removeClass("active");
然后点击的那个元素
addClass("active")