方法:
按下方法有兩種:
1. $('元素').click(function(){ ......});
2. $('元素').bind('click',function(){ ......});
樣式新增刪除:
新增:$('#b1').addClass('cb');
刪除:$('#b2').removeClass('cb');
新增或刪除:$('#b3').toggleClass('cb');
程式範例 :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>按下後改變樣式的方法</title>
<style type="text/css">
.cb {
border: 3px solid #CF3134;
}
</style>
</head>
<script
src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script language="javascript">
$(document).ready(function(){
$('#b1').click(function(){
$('#b1').addClass('cb');
});
$('#b2').bind('click',function(){
$('#b2').removeClass('cb');
});
$('#b3').bind('click',function(){
$('#b3').toggleClass('cb');
});
});
</script>
<body>
<h1 id="b1">新增紅框樣式</h1>
<h1 id="b2" class="cb">刪除紅框樣式</h1>
<h1 id="b3">新增或刪除紅框樣式</h1>
</body>
</html>
留言列表