比如一个由几个包含<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>
温馨提示:答案为网友推荐,仅供参考