[ jQuery ] 按下後改變指定樣式的方法

方法：

按下指定的方法：

$('元素').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>

小甲學習地

學習資訊部落

小甲學習地發表在痞客邦留言(0) 人氣( 11 )

全站分類：進修深造
個人分類： jQuery

▲top

請先登入以發表留言。

==red==

==blue==

==green==

學習資訊部落

歡迎光臨，來到學習天地。本部落以學習為主。

參觀人氣

==red==

==blue==

==green==

學習資訊部落

歡迎光臨，來到學習天地。 本部落以學習為主。