相信許多人都看過像開關一樣的按鈕，看起來好像很難製作，但實際上想要讓按鈕具有類似開關按鈕的效果只需要製作兩種 class 樣式，再使用 jQuery 去切換 class 即可。
HTML
<button class="btn">
<div class="ball" onclick="slide()"></div>
</button>首先先做一個button，並給它一個 class，接著要在裡面做一顆小球，因此需要再給它一個元素，一樣給它一個 class，並再給它一個onclick的指令，這意思是當點擊時要它什麼，而裡面的slide()就是要觸發 jQuery 去執行動作，這個slide()可以自訂名稱，但後面的()不可省略。
接下來要設計按鈕的樣式，需要按之前跟按下之後的兩種樣式。
CSS
.btn {
width: 6rem;
height: 2.5rem;
margin:.1rem;
padding: .1rem;
background: #555;
border: 2px solid #ccc;
border-radius: 2rem;
transition: .3s;
box-shadow: inset 1px 1px 5px #333, .1rem .2rem .5rem #999;
}
.ball {
width: 2rem;
height: 2rem;
background: #777;
border: inset .1rem rgba(153, 153, 153, 0.43);
border-radius: 50%;
box-sizing: border-box;
cursor: pointer;
transition: .3s;
box-shadow: 1px 1px 5px #000;
}
.on.btn {
background: #777;
}
.on .ball {
background: #999;
outset .1rem rgba(153, 153, 153, 0.43)
box-shadow: -1px 1px 5px #000;
margin-left: calc(100% - 2rem);
}看起來很長，但總共就四種 class，分別是按鈕btn、小球ball，以及按下後的按鈕btn跟小球ball。
等等我們會讓 jQuery 去新增與移除 class .on，因此 button 元素在按按鈕之前的class 是btn，按下按鈕之後則會是btn on，可以按右鍵的「檢查」看 HTML 的變化。
漸變效果
CSS樣式可依照個人喜好去調整，這裡特別加上了transition: .3s，這意思是漸變效果，.3s 是 0.3 秒的意思，這樣開關會有移過去的感覺，而不是瞬間跑到右邊。
jQuery
function slide() {
$('button').toggleClass('on');
}
這個 function 會執行slide()的動作，動作內容則寫在{}裏面，$('button')是指button這個元素，如果要指定為id則寫$('#id_name')，指定class則是$('.class_name')。
toggleClass意思是切換 class，後面我們指定切換的 class 名稱為on，這樣當執行動作時，如果沒有on就新增on，如果有on則移除on，這樣就完成「開關」模擬了。
實際操作
直接看實際例子比較快：
See the Pen Untitled by kumo (@kumo-tw) on CodePen.
我還有做背景顏色的切換，這樣更有開關的感覺，道理也一樣，就是在指定的元素中（例如body）新增on即可。
以上就是模擬開關的小技巧，希望有幫到各位。