Javascript 单击即可更改li元素的样式

我已经为我的网站创建了本地导航菜单。它包含2个li元素，如图所示

$（文档）.ready（函数（）{
$（“li”）.addClass（“liNavA”）；
$（“a”）.addClass（“活动”）；
});
div.figure{
背景色：黑色；
边界半径：50%；
宽度：自动；
}
李利纳夫{
列表样式类型：无；
显示：内联块；
边缘顶部：18px；
左边距：4倍；
文本对齐：左对齐；
边框：实心12px黑色；
边界半径：24px；
背景颜色：黑色
}
李丽娜{
列表样式类型：无；
显示：内联块；
边缘顶部：18px；
左边距：4倍；
文本对齐：左对齐；
边框：实心12px白色；
边界半径：24px；
颜色：白色；
背景色：白色；
}
a、 活跃的{
颜色：白色；
文字装饰：无；
}
a、 帕西夫{
颜色：黑色；
文字装饰：无；
}






部门数字{
背景色：黑色；
边界半径：50%；
宽度：自动；
}
李利纳夫{
列表样式类型：无；
显示：内联块；
边缘顶部：18px；
左边距：4倍；
文本对齐：左对齐；
边框：纯色2px黑色；
填充物：5px；
边界半径：24px；
背景色：#FFFFFF
}
李丽娜{
列表样式类型：无；
显示：内联块；
边缘顶部：18px；
左边距：4倍；
文本对齐：左对齐；
边框：纯色2px白色；
填充物：5px；
边界半径：24px；
颜色：白色；
背景色：#000000；
}
李丽娜{
颜色：白色；
}
a、 活跃的{
文字装饰：无；
}
a、 帕西夫{
文字装饰：无；
}





$（文档）.ready（函数（）{
/**
*为每个列表项添加事件列表器
*/
$（“#exploreTitle”）。单击（函数（）{
$（“#exploreTitle”）.attr（'class'，'liNavA'）；
$（“#liRight”）.attr（'class'，'liNav'）；
$（“#liLeft”）.attr（'class'，'liNav'）；
})
$（“#liRight”）。单击（函数（）{
$（“#liRight”）.attr（'class'，'liNavA'）；
$（“#exploreTitle”）.attr（'class'，'liNav'）；
$（“#liLeft”）.attr（'class'，'liNav'）；
})
$（“#liLeft”）。单击（函数（）{
$（“#liLeft”）.attr（'class'，'liNavA'）；
$（“#liRight”）.attr（'class'，'liNav'）；
$（“#exploreTitle”）.attr（'class'，'liNav'）；
})
});
“单击项目后…”-代码中没有单击事件处理程序。你只是在问如何使用jQuery的
.click（）
功能吗？我想在单击该项并从所有其他li元素中删除css时添加css类。你在每个li中使用两个Id（错误），并对两个不同的
使用相同的Id（也错误），首先修复我修复了它，谢谢！
<style type="text/css">
    div.figure {
      background-color: black;
      border-radius: 50%;
      width: auto;
    }

    li.liNav {
      list-style-type: none;
      display: inline-block;
      margin-top: 18px;
      margin-left: 4px;
      text-align: left;
      border: solid 2px black;
      padding: 5px;
      border-radius: 24px;
      background-color: #FFFFFF
    }

    li.liNavA {
      list-style-type: none;
      display: inline-block;
      margin-top: 18px;
      margin-left: 4px;
      text-align: left;
      border: solid 2px white;
      padding: 5px;
      border-radius: 24px;
      color: white;
      background-color: #000000;
    }

    li.liNavA a {
      color: white;
    }

    a.active {
      text-decoration: none;
    }

    a.pasive {
      text-decoration: none;
    }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="localnavDiv">
  <ul class="localNav">
    <li class="liNav" id="exploreTitle"><a class="active" href="#">Explore</a></li>
    <li class="liNav" id="liRight"><a class="pasive" href="#">Who already joined</a></li>
    <li class="liNav" id="liLeft"><a class="active" href="#">Why develop for Hue</a></li>
  </ul>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        /**
         * add event listner for every list-item
         */
        $("#exploreTitle").click(function(){
            $("#exploreTitle").attr('class', 'liNavA');

            $("#liRight").attr('class', 'liNav');
            $("#liLeft").attr('class', 'liNav');
        })

        $("#liRight").click(function(){
            $("#liRight").attr('class', 'liNavA');

            $("#exploreTitle").attr('class', 'liNav');
            $("#liLeft").attr('class', 'liNav');
        })
        $("#liLeft").click(function(){
            $("#liLeft").attr('class', 'liNavA');

            $("#liRight").attr('class', 'liNav');
            $("#exploreTitle").attr('class', 'liNav');
        })
    });
</script>