重寫以前的demo是一件非常好的事情
1、用css實現(xiàn)switch button
基本原理：使用input的checkbox類型，當input被鼠標點擊checked的時候通過 input:checked + .slide的方法在樣式里讓其向右移動100px，而當鼠標再次點擊input沒有被checked的時候，則樣式失效，.slide回到原來的位置。
注意點：CSS樣式中 + 號的意義，如果h1 + p 表示的意思就是和h1同級的標簽里緊接著也就是邊上的鄰近h1的p標簽被選中。另一個注意點是css的偽類，比如.slide是input的鄰近兄弟元素，而當.slide用css偽類的時候，.slide:before同樣也會被當成.slide的鄰近兄弟元素。
這里插一個巨坑
這里插一個巨坑，把我坑了整整一天半啊，整整一天半?。。?！關(guān)于transition的使用，它的前兩個屬性是name和duration這兩個屬性，但是如果你想要在position:absolute;的情況下過渡地實現(xiàn)left:100px;的時候，這個時候這個時候一定要注意，那就是一定在transition那個樣式欄里出現(xiàn)left屬性和它的值，如果不出現(xiàn)的話并且只寫all的話，這個過渡效果不出現(xiàn)的，是不出現(xiàn)的！簡寫害死人啊！簡寫害死人啊啊?。。。?/strong>
這里還有就是transition只對block元素生效。
接著之前的話，具體例子如下：
input:checked + .slide:before{
left:50px;
}
input:checked + .slide{
background:blue;
}
被input被checked的時候，.slide和它的偽類的樣式都會生效。再次點擊失效，這是一種純CSS的方法，有點討巧。需要注意的是label標簽的for
<label for="btn">
<input type="checkbox" id="btn">
</label>
這樣寫的好處是當點擊到標簽本身時，input也會被checked，當然不寫也是行的，只要label住input也會有同樣的效果。
2、用jQuery實現(xiàn)switch button的兩種方法
這兩種方法其實差不多，一種是用toggleClass()來添加和刪除className，另一種則是用toggle()來顯示和隱藏身邊的東西來實現(xiàn)左右位移。
- 關(guān)于toggleClass()的方法
$('.div1').click(function(){
$('.div1').toggleClass('move')
})
在.move里添加相應(yīng)的移動即可。
- 關(guān)于toggle()的辦法
$('.div3').click(function(){
$('.div2').toggle()
})
在html里寫好兩個div，并且把它們橫向包在一個div里，然后通過顯示和隱藏其中一個div來實現(xiàn)另一個div的移動。
