溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2021-08-09 02:07:58 來(lái)源：億速云 閱讀：138 作者：chen 欄目：開發(fā)技術(shù)

本篇內(nèi)容主要講解“怎么用jQuery實(shí)現(xiàn)簡(jiǎn)單的按鈕顏色變化”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“怎么用jQuery實(shí)現(xiàn)簡(jiǎn)單的按鈕顏色變化”吧!

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

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

怎么用jQuery實(shí)現(xiàn)簡(jiǎ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>

效果如下：

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

 下面是完整代碼：

<!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ù)雜的操作。

到此，相信大家對(duì)“怎么用jQuery實(shí)現(xiàn)簡(jiǎn)單的按鈕顏色變化”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手