我們經常做的是點擊元素改變樣式，只是點擊一次，那麽如果點擊很多次呢，我們需要元素來回變化呢？這時候我們就用class名來改變，判斷是否有該class

啥都別說了，上代碼

<div class="shbian test">你點我就變</div><!--點擊顯示，再點擊其他地方隱藏-->

.shbian{text-align: center;height: 60px;line-height: 60px;width: 160px;cursor: pointer}/*基本的樣式*/
.active{color: white;background: midnightblue;box-shadow: 0 0 10 #000000;border-radius: 6px;border: none;;}/*一個樣式*/
.test{border: 1px solid #009688;border-radius: 6px;}/*默認的樣式*/

var shb=$(‘.shbian‘);
			shb.on(‘click‘,function(){
				if(shb.hasClass(‘test‘)){//如果有‘test’的樣式，就去除他的樣式，添加‘active’的樣式
					shb.removeClass(‘test‘).addClass(‘active‘);
				}else if(shb.hasClass(‘active‘)){//如果有‘active’的樣式，就祛除他的樣式，添加‘test’的樣式
					shb.removeClass(‘active‘).addClass(‘test‘);
				}
			})

　　效果圖：原來默認的，

點擊改變，

再點擊：

點擊元素改變樣式，再點擊，又變回去，來回變