jQuery實現(xiàn)簡單的按鈕顏色變化
更新時間：2021年08月08日 11:56:34 作者：Wellfancy
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡單的按鈕顏色變化，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
在HTML和CSS中我們想要完成一個對按鈕顏色的設置，雖然也可以做到想要的效果，但過程比較繁瑣，利用jQuery我們就可以輕松的完成這件事情。
假設現(xiàn)在我們有一組按鈕
當我們點擊其中一個的時候讓它變成粉色，再點擊另一個后除了被點擊的按鈕全部為原始顏色，我們應該怎樣做呢
其實只需要簡單的幾行代碼即可完成
<script>
$(function(){
$('Button').click(function(){
//先設置點擊的按鈕顏色變?yōu)榉凵?
$(this).css('background','pink');
//再設置除了當前元素的其他兄弟元素的顏色為“空”
//siblings是選中當前元素的所有兄弟元素（除去當前元素）
$(this).siblings('button').css('background','');
});
});
</script>
效果如下：
下面是完整代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Wellfancy</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
div{
border: 2px solid lightpink;
margin: 50px auto;
padding:50px ;
}
</style>
</head>
<body>
<div>
<button>選項1</button>
<button>選項2</button>
<button>選項3</button>
<button>選項4</button>
<button>選項5</button>
<button>選項6</button>
<button>選項7</button>
</div>
<script>
$(function(){
$('Button').click(function(){
$(this).css('background','pink');
$(this).siblings('button').css('background','');
});
});
</script>
</body>
</html>
可以看到，當我們使用jQuery時是不是比只用css要簡單得多呢？我們可以利用更簡短的代碼完成更復雜的操作。
相關(guān)文章
jQuery EasyUI基礎教程之EasyUI常用組件(推薦)
這篇文章主要介紹了jQuery EasyUI基礎教程之EasyUI常用組件(推薦),非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
要實現(xiàn)這樣的一個功能復選框勾選時給input表單賦值，復選框取消時將表單值清除，需要的朋友可以參考下2014-05-05
jQuery實現(xiàn)花式輪播之圣誕節(jié)禮物傳送效果
這篇文章主要介紹了jQuery實現(xiàn)花式輪播之圣誕節(jié)禮物傳送效果,需要的朋友可以參考下2016-12-12
使用jquery的朋友不得不看的,jquery ui接口，提升jquery的效率2008-09-09
Jquery AJAX實現(xiàn)頁面的統(tǒng)計代碼，后臺用的是php,這篇文章主要是學習jquery下ajax的簡單實現(xiàn)。2010-06-06
常用的jquery模板插件——jQuery Boilerplate介紹
Query Boilerplate是一個不錯的jQuery插件開發(fā)工具，使用這個工具可以幫助你快速的構(gòu)建一個jQuery框架。這個工具提供你很多評論用以幫助你使得開發(fā)變得簡單和直接，它是個真正的面對對象的工具，你可以實現(xiàn)公開或者私有的方法或者公開或者私有的屬性。2014-09-09
這篇文章主要介紹了基于Jquery插件實現(xiàn)跨域異步上傳文件功能的相關(guān)資料,需要的朋友可以參考下2016-04-04
web前端開發(fā)JQuery常用實例代碼片段(50個)
本文給大家展示50個jquery代碼片段，這些代碼能夠給你的javascript項目提供幫助，需要的朋友快來學習一下吧2015-08-08
實例代碼講解jquery easyui動態(tài)tab頁
這篇文章主要介紹了實例代碼講解jquery easyui動態(tài)tab頁的相關(guān)資料,需要的朋友可以參考下2015-11-11
基于Jquery實現(xiàn)仿百度百科右側(cè)導航代碼附源碼下載
本篇文章給大家介紹基于jquery實現(xiàn)仿百度百科右側(cè)導航代碼附源碼下載，對百度百科右側(cè)導航代碼相關(guān)內(nèi)容感興趣的朋友可以參考下本文2015-11-11