实现效果：点击模块为当前元素添加class，同时移除其他三个元素的class
$('#headnav li').click(function() {
$(this).addClass('current-menu').siblings().removeClass('current-menu');
})
}
即给id为headnav下的li添加click点击事件，当点击这个元素时添加提前写好的class样式current-menu，siblings是获取其他同胞然后移除他们的class
class为current-menu显示的效果是改变背景色以及宽度，如下为完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery添加class</title>
</head>
<style>
.headnav .current-menu a{
width: 120px;
background-color: #62d2f9;
}
</style>
<body>
<!--head star-->
<div class="enter_head clearfix">
<div class="head_logo left">
<img src="">
<h3>jQuery添加class</h3>
</div>
<ul class="headnav left" id="headnav">
<li id="menu_0" class="current-menu">
<a href="#">菜单管理</a>
</li>
<li id="menu_1">
<a href="#">模块管理</a>
</li>
<li id="menu_2">
<a href="#">系统设置</a>
</li>
<li id="menu_3">
<a href="#">扩展管理</a>
</li>
</ul>
</div>
<!--head end-->
<script type="text/javascript" src="script/bootstrap/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#headnav li').click(function() {
$(this).addClass('current-menu').siblings().removeClass('current-menu');
})
})
</script>
</body>
</html>