jQuery實(shí)現(xiàn)簡(jiǎn)單的按鈕顏色變化

更新時(shí)間：2021年08月08日 11:56:34 作者：Wellfancy

這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的按鈕顏色變化，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在HTML和CSS中我們想要完成一個(gè)對(duì)按鈕顏色的設(shè)置，雖然也可以做到想要的效果，但過程比較繁瑣，利用jQuery我們就可以輕松的完成這件事情。

假設(shè)現(xiàn)在我們有一組按鈕

當(dāng)我們點(diǎn)擊其中一個(gè)的時(shí)候讓它變成粉色，再點(diǎn)擊另一個(gè)后除了被點(diǎn)擊的按鈕全部為原始顏色，我們應(yīng)該怎樣做呢

其實(shí)只需要簡(jiǎn)單的幾行代碼即可完成

<script>
 $(function(){
  $('Button').click(function(){
             //先設(shè)置點(diǎn)擊的按鈕顏色變?yōu)榉凵?
   $(this).css('background','pink');
             //再設(shè)置除了當(dāng)前元素的其他兄弟元素的顏色為“空”
             //siblings是選中當(dāng)前元素的所有兄弟元素（除去當(dāng)前元素）
   $(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>選項(xiàng)1</button>
  <button>選項(xiàng)2</button>
  <button>選項(xiàng)3</button>
  <button>選項(xiàng)4</button>
  <button>選項(xiàng)5</button>
  <button>選項(xiàng)6</button>
  <button>選項(xiàng)7</button>
 </div>
 <script>
 $(function(){
  $('Button').click(function(){
   $(this).css('background','pink');
   $(this).siblings('button').css('background','');
  });
 });
     </script>
 
</body>
 
</html>

可以看到，當(dāng)我們使用jQuery時(shí)是不是比只用css要簡(jiǎn)單得多呢？我們可以利用更簡(jiǎn)短的代碼完成更復(fù)雜的操作。

您可能感興趣的文章:

相關(guān)文章

jQuery EasyUI基礎(chǔ)教程之EasyUI常用組件(推薦)
這篇文章主要介紹了jQuery EasyUI基礎(chǔ)教程之EasyUI常用組件(推薦),非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-07-07
jQuery判斷復(fù)選框是否勾選的原理及示例
要實(shí)現(xiàn)這樣的一個(gè)功能復(fù)選框勾選時(shí)給input表單賦值，復(fù)選框取消時(shí)將表單值清除，需要的朋友可以參考下
2014-05-05
jQuery實(shí)現(xiàn)花式輪播之圣誕節(jié)禮物傳送效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)花式輪播之圣誕節(jié)禮物傳送效果,需要的朋友可以參考下
2016-12-12
各種效果的jquery ui(接口)介紹
使用jquery的朋友不得不看的,jquery ui接口，提升jquery的效率
2008-09-09
Jquery AJAX 用于計(jì)算點(diǎn)擊率(統(tǒng)計(jì))
Jquery AJAX實(shí)現(xiàn)頁面的統(tǒng)計(jì)代碼，后臺(tái)用的是php,這篇文章主要是學(xué)習(xí)jquery下ajax的簡(jiǎn)單實(shí)現(xiàn)。
2010-06-06
常用的jquery模板插件——jQuery Boilerplate介紹
Query Boilerplate是一個(gè)不錯(cuò)的jQuery插件開發(fā)工具，使用這個(gè)工具可以幫助你快速的構(gòu)建一個(gè)jQuery框架。這個(gè)工具提供你很多評(píng)論用以幫助你使得開發(fā)變得簡(jiǎn)單和直接，它是個(gè)真正的面對(duì)對(duì)象的工具，你可以實(shí)現(xiàn)公開或者私有的方法或者公開或者私有的屬性。
2014-09-09
基于Jquery插件實(shí)現(xiàn)跨域異步上傳文件功能
這篇文章主要介紹了基于Jquery插件實(shí)現(xiàn)跨域異步上傳文件功能的相關(guān)資料,需要的朋友可以參考下
2016-04-04
web前端開發(fā)JQuery常用實(shí)例代碼片段(50個(gè))
本文給大家展示50個(gè)jquery代碼片段，這些代碼能夠給你的javascript項(xiàng)目提供幫助，需要的朋友快來學(xué)習(xí)一下吧
2015-08-08
實(shí)例代碼講解jquery easyui動(dòng)態(tài)tab頁
這篇文章主要介紹了實(shí)例代碼講解jquery easyui動(dòng)態(tài)tab頁的相關(guān)資料,需要的朋友可以參考下
2015-11-11
基于Jquery實(shí)現(xiàn)仿百度百科右側(cè)導(dǎo)航代碼附源碼下載
本篇文章給大家介紹基于jquery實(shí)現(xiàn)仿百度百科右側(cè)導(dǎo)航代碼附源碼下載，對(duì)百度百科右側(cè)導(dǎo)航代碼相關(guān)內(nèi)容感興趣的朋友可以參考下本文
2015-11-11