导航点击变色基础部分

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul li a.active{color:red;}
    </style>
</head>
<body>
<ul class="between">
    <li><a href="#" class="active">qu</a></li>
    <li><a href="#">qu</a></li>
    <li><a href="#">qu</a></li>
    <li><a href="#">qu</a></li>
    <li><a href="#">qu</a></li>
</ul>
<script src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('li').children().on("click",function(){
//原有的active删除,点击的添加,兄弟元素上的class删除即可 $(
'.active').removeClass("active"); $(this).addClass("active").siblings().removeClass("active"); }) }) </script> </body> </html>

原文地址:https://www.cnblogs.com/zxcc/p/7693111.html