方法:
按下指定的方法:
('元素').click(function(event){...});
範例語法:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>按下後改變指定樣式的方法</title>
<style type="text/css">
.cb {
border: 3px solid #CF3134;
}
.red {
border: 3px solid #9E0002;
}
.blue {
border: 3px solid #040E86;
}
.green {
border: 3px solid #0A4E00;
}
</style>
</head>
<script
src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script language="javascript">
(document).ready(function(){
('#b_all').click(function(event){
if((event.target).is('h2')){
var tk=event.target.id; 抓取id名稱
('p').removeClass().addClass(tk); 依id名稱為套用樣式名稱
('#b_all h2').removeClass('cb'); 取消#b_all裡面的全部樣式
(event.target).addClass('cb'); 依id名稱套用樣式
event.stopPropagation(); 此方法停止事件傳遞到上一層元素,避免上一層元素事件重複處理。
}
});
});
</script>
<body>
<div id="b_all">
<h2 id="red">==red==</h2>
<h2 id="blue">==blue==</h2>
<h2 id="green">==green==</h2>
</div>
<p>改變顏色abcde</p>
</body>
</html>
程式語法 (10)