iT邦幫忙

DAY 42
9

CSS沒有極限系列 第 38

CSS - 利用jQuery套用Class(超簡單!)

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>

上一篇
CSS - Flex的對齊
下一篇
CSS - 利用jQuery套用Class(2)
系列文
CSS沒有極限41

2 則留言

0
月半車甫
iT邦研究生 3 級 ‧ 2013-10-27 21:54:38

恭喜大大完賽!讚拍手灑花

我要留言

立即登入留言