萬盛學電腦網 >> 腳本專題 >> javascript >> jQuery toggleClass應用實例
jQuery toggleClass應用實例
這篇文章主要介紹了jQuery toggleClass的應用,需要的朋友可以參考下
1、首先到jQuery官網下載js庫，網址為http://jquery.com/ 2、建立一個jQuery示例的項目。 3、將js庫放到jQuery示例的項目中。 4、寫一個html頁面 代碼如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="author" content="Kong.Yee"/> <meta http-equiv="corporation" content="廣州匡興軟件科技有限公司"/> <meta http-equiv="contact" content="791663094或[email protected]"/> <script type="text/javascript" language="JavaScript" src="js/jquery-1.10.2.js"></script> <title>Insert title here</title> <style type="text/css"> .bg{ /*背景顏色*/ background: #f00; /*字體顏色*/ color: #fff; width: 80px; } ul, li { /*清除ul和li上默認的小圓點*/ list-style: none; } ul { /*清除子菜單的縮進值*/ padding: 0;/*IE8,IE9,火狐可以；IE7，IE6，IE5.5不行*/ margin: 0;/*都可以了*/ } </style> <script type="text/javascript"> $(function(){ //setColor是鼠標移動的方法 $("li").mouseover(setColor).mouseout(setColor); function setColor(){ //如果存在（不存在）就刪除（添加）一個類 $(this).toggleClass("bg"); } }); </script> </head> <body> <div id="div"> <ul> <li>橫向菜單1</li> <li>橫向菜單2</li> <li>橫向菜單3</li> <li>橫向菜單4</li> <li>橫向菜單5</li> <li>橫向菜單6</li> </ul> </div> </body> </html>javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved