在HTML和CSS中我們想要完成一個對按鈕顏色的設定，雖然也可以做到想要的效果，但程序比較繁瑣，利用jQuery我們就可以輕松的完成這件事情，
假設現在我們有一組按鈕
當我們點擊其中一個的時候讓它變成粉色，再點擊另一個后除了被點擊的按鈕全部為原始顏色，我們應該怎樣做呢
其實只需要簡單的幾行代碼即可完成
<script>
$(function(){
$('Button').click(function(){
//先設定點擊的按鈕顏色變為粉色
$(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要簡單得多呢？我們可以利用更簡短的代碼完成更復雜的操作，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/291880.html
標籤：其他
上一篇：Odoo JavaScript實作點擊復制char欄位值
下一篇：WebPack 4.x 配置