头部引用：
<link href="../ATheme/css/base.css" rel="stylesheet" /> <script src="../ATheme/js/jquery-1.8.3.min.js"></script>
html结构：
<body>
<div class="main">
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>橘子</li>
<li>番茄</li>
</ul>
</div>
</body>
base样式：
.main ul li {
list-style-type: none;
float: left;
4%;
height: 40px;
line-height: 40px;
text-align: center;
margin-left: 3.5%;
border: 1px solid #CCCCCC;
border-radius: 10px;
}
.add {
color: #2AC845;
border: 1px solid #2AC845;
border-radius: 10px;
}
JQuery：
$(function () {
//第一种方法
$(".main li").toggle(function () {
$(this).addClass("add");
}, function () {
$(this).removeClass("add");
});
//第二种方法
$(".main li").on("click", function () {
var li = $(this);
if (li.hasClass("add")) {
li.removeClass("add");
} else {
li.addClass("add");
}
});
//鼠标悬浮改变颜色
$(".main li").hover(function () {
$(this).addClass("add");
}, function () {
$(this).removeClass("add");
})
})