CSS是專門處理網頁的樣式，在互動的部分都會使用javascript，雖然本網站之前的許多互動範例是純CSS，但會有相容性上的問題，而要簡易方式去寫互動的元件，會建議使用jqeury。

而本篇會簡單的介紹如何使用jQuery，寫一個點擊後套用另一個Class的javascript。

CSS範例：http://ashareaday.wcc.tw/#2013-10-27


CSS是專門處理網頁的樣式，在互動的部分都會使用javascript，雖然本網站之前的許多互動範例是純CSS，但會有相容性上的問題，而要簡易方式去寫互動的元件，會建議使用jqeury。

而本篇會簡單的介紹如何使用jQuery，寫一個點擊後套用另一個Class的javascript。

jQuery
jQuery是javascript的函示庫，標榜著寫得少，做的多，並且可以解決許多跨瀏覽器的問題。

jQuery: http://jquery.com/

jQuery由許多的版本，目前建議會使用1.8~1.9版；如果不需要支援IE8以下，或是只支援行動裝置的情況就可以考慮使用2.0版以上。

//本網站就是掛載1.8的jquery，可以參考看看本站的Jquery位置，放在head內部，CSS的後方
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>

對自己套用額外的Class
首先我們先做一個簡單的按鈕樣式後，再新增一個Current的Class，而在使用者點擊後的樣式，就做在Current的class內，以下的sass範例。

//sass code
.btn-demo
  //預設的樣式
  ...

.current
  //js互動後的樣式
  +box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.60),0 1px 2px rgba(0, 0, 0, 0.05))        
  background-color: $darkenColor
  border: 1px solid darken($darkenColor,10%) 

接下來我們把下面的script寫在掛載的jquery後方(確保以載入jQuery函式庫)，再試試看預期的效果有沒有出來~。

<script>
$(document).ready(function() {
  $('.btn-demo').click(function(_evt){
  _evt.preventDefault();
  $(this).toggleClass('current');
  });
});
</script>

Script說明

<script>
//javascript需要放在script標籤內才會被執行

$(document).ready(function() {
//在文件完全載入後，執行這內部的function

  $('.btn-demo').click(function(_evt){
  //$('.btn-demo'):這是一個選取器，而裡面的值就直接用Css選取器的寫法即可，如.class或是#id
  //.click : 這是一個點擊事件，只要這個按鈕被點擊，就會執行這內部的Function

  _evt.preventDefault();
  //不執行a這個標籤內的預設動作(href="#")

  $(this).toggleClass('current');
  //$(this): 觸發事件的選取器
  //.toggleClass('current') : 切換current這一個Class

  });
});
</script>