jQuery实现两个CSS样式之间的点击切换

指定CSS样式之间的点击切换

jQuery实现两个指定样式的点击切换的效果：

代码如下：

html代码：

<div class="green"></div>

CSS代码：

.green{

height:100px;

width:100px;

background:green;

}

.red{

height:100px;

width:100px;

background:red;

}

jQuery代码：

此代码使代码变为局部的代码 与页面中的其它的代码之间不会轻易发生冲突

将变换的代码封装在一起 方便调用

$('div').click(function(){

$(this).toggleClass(function(){

if($(this).hasClass('red')){

$(this).removeClass('red');

return 'green';

}else{

$(this).removeClass('green');

return 'red';

}

})

});