當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jquery实现单击div切换背景，再次单击回到原来样式

發布時間：2023/12/3 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 jquery实现单击div切换背景，再次单击回到原来样式小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

首先來看看效果圖：
1.這是默認的的div樣式：

2.當我們單擊第一個div時的樣式：

3.當我們再次單擊第一個div時的樣式：

如果你需要的效果是這樣的，那么請您繼續往下面看，如果不是，您也可以看看實現方法。
5.首先我們需要一個jQuery環境jquery-1.8.3.js，這個文件網上一搜一大堆，可以自行準備。將該文件放置到項目下面的js目錄下面。
6.然后下面是源代碼：

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script src="js/jquery-1.8.3.js" type="text/javascript"></script><script type="text/javascript">$(function(){$(".div_1").toggle(function(){$(this).addClass("style_div");},function(){$(this).removeClass("style_div");});});</script><style type="text/css">.div_1 {width: 100px;height: 50px;background: darkolivegreen;margin: 10px;}.div_1:hover{cursor: pointer;}.style_div{border: 1px solid red;background: white;}</style></head><body><div id="main"><div class="div_1"></div><div class="div_1"></div><div class="div_1"></div><div class="div_1"></div></div></body></html>

歡迎關注本人微信公眾號“夢翔資源匯”，會有意想不到的收獲哦~~~

總結

以上是生活随笔為你收集整理的jquery实现单击div切换背景，再次单击回到原来样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：让你电脑不再有恶心人的蓝屏自动更新电脑自
下一篇：第二章用表组织数据