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

.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;

}

 

 

 

 

<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);

}

}

});

});

}）；

 

 

<ul>

<li id="tyui1" class="personal">个人版</li>

<li id="tyui2" class="personalTwo">企业版</li>

</ul>

 

效果图

 

转载于:https://www.cnblogs.com/lovebear123/p/11227500.html