Question

网页开发：如何让一个a标签元素被点击变换样式固定不变，再点击其他的a标签后，该元素恢复之前的样式？

比如一个由几个包含<a>标签的<li>元素组成的导航菜单栏，包含首页、菜单1，菜单2，我能用hover伪类让鼠标移动到菜单1上时改变样式，但是不知道该怎么让鼠标点击菜单1后，菜单1的样式能保持被点击时的不变，而且还能在点击菜单2时，菜单1恢复被点击前的样式。
这样的功能纯css无法实现吗？必须用js吗？如果用js才能做到，那该怎么做，求详解，谢谢各位大佬！

Answer 1

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>