比如一个由几个包含<a>标签的<li>元素组成的导航菜单栏，包含首页、菜单1，菜单2，我能用hover伪类让鼠标移动到菜单1上时改变样式，但是不知道该怎么让鼠标点击菜单1后，菜单1的样式能保持被点击时的不变，而且还能在点击菜单2时，菜单1恢复被点击前的样式。
这样的功能纯css无法实现吗？必须用js吗？如果用js才能做到，那该怎么做，求详解，谢谢各位大佬！
css无法直接改变对应的class，所以js可以搞。
<script src='jquery.min.js'></script>
<style>
li.active a{ color:red; }
a.active{ color:red; }
</style>
<ul>
<li><a>首页</a></li>
<li><a>菜单1</a></li>
<li><a>菜单2</a></li>
</ul>
<script>
jQuery(function(){
//法1
$('ul>li a').click(function(){
$(this).addClass('active').parent().siblings('li').children('a').removeClass('active');
});
//法2
$('ul li').click(function(){
$(this).addClass('active').siblings('li').removeClass('active');
});
});
</script>
温馨提示：答案为网友推荐，仅供参考
