js点击改变文字颜色和背景色

cs

 

.personal {
background-color: #3A99FF;
color: #fff;
padding-left: 10px;
}

.personalTwo
{
/*
color: #fff; */
width: 66px;
height: 33px;
color: #3A99FF;
background-color: #fff;
/* padding-left: 14px; */
font-size: 15px;
text-align: center;
border: 1px solid #3A99FF;

}

 

 

 

 

 js：

 

<script type="text/javascript">
$(function () {
$(' li').click(function () {
var blue = 'personal';
var white = 'personalTwo';
var current = this;
$('li').each(function (i, e) {
if (e == current) {
if ($(e).hasClass(white)) {
$(e).removeClass(white);
$(e).addClass(blue);
}
}
else {
if ($(e).hasClass(blue)) {
$(e).removeClass(blue);
$(e).addClass(white);
}
}
});
});
}）；

 

 

 html：

 

<ul>
<li id="tyui1" class="personal">个人版</li>
<li id="tyui2" class="personalTwo">企业版</li>
</ul>
 

 

效果图