首頁 >web前端 >js教程 >jQuery toggleClass應用實例(附效果圖)_jquery

jQuery toggleClass應用實例(附效果圖)_jquery

WBOY
WBOY原創
2016-05-16 16:53:161092瀏覽

1.首先到jQuery官網下載js庫,網址為http://jquery.com/

2、建立一個jQuery範例的項目。

3、將js函式庫放到jQuery範例的專案中。

4、寫一個html頁

複製程式碼 程式碼如下:













Insert title here title> <br><style type="text/css"> <BR>.bg{ <BR>/*背景顏色*/ <BR>background: #f00; <br>/*字體顏色*/ <br> color: #fff; <BR>width: 80px; <BR>} <BR><br>ul, li { <br>/*清除ul和li上預設的小圓點*/ <BR>list-style: none; <BR>} <BR><BR>ul { <br>/*清除子選單的縮排值*/ <br>padding: 0;/*IE8,IE9,火狐可以;IE7,IE6,IE5. 5不行*/ <BR>margin: 0;/*都可以了*/ <BR>} <BR><BR></style> <br><script type="text/javascript"> <br>$( function(){ <BR>//setColor是滑鼠移動的方法<BR>$("li").mouseover(setColor).mouseout(setColor); <BR><BR>function setColor(){ <BR>/ /如果存在(不存在)就刪除(新增)一個類別<BR>$(this).toggleClass("bg"); <BR>} <BR>}); <BR></script> <br> <br>


  • 橫向選單1

  • 橫向選單2 li>
  • 橫向選單3

  • 橫向選單4

  • 橫向選單5

  • 橫向選單6



jQuery toggleClass應用實例(附效果圖)_jquery 5、運行效果圖
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn