點選按鈕設定其背景顏色程式碼例項

螞蟻小編發表於2017-04-14

本章節分享一段程式碼例項，它實現了點選按鈕設定其背景顏色效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
input[type="button"] {
  width: 100px;
  height: 30px;
  line-height: 30px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 3px;
}
input.xuanz {
  background: #09F;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function () {
  $("input").click(function () {
    $(this).siblings().removeClass("xuanz");
    $(this).addClass("xuanz");
  })
})
</script>
</head>
<body>
<input type="button" value="div教程" />
<input type="button" value="css教程" />
<input type="button" value="jquery教程" />
<input type="button" value="js教程" />
<input type="button" value="json教程" />
<input type="button" value="ajax教程" />
</body>
</html>

上面的程式碼實現了我們的要求，下面簡單介紹一下它的實現過程。

一.程式碼註釋:

（1）.$(document).ready(function () {})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）. $("input").click(function () {}）,為input元素註冊click事件處理函式。

（3）.$(this).siblings().removeClass("xuanz")，將當前點選按鈕的所有兄弟元素刪除xuanz樣式類。

（4）.$(this).addClass("xuanz")，為當前按鈕新增xuanz樣式類。

二.相關閱讀:

（1）.siblings()可以參閱jQuery siblings()一章節。

（2）.removeClass()可以參閱jQuery removeClass()一章節。

（3）.addClass()可以參閱jQuery addClass()一章節。

相關文章