close

方法:
按下方法有兩種:

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>

arrow
arrow
    文章標籤
    javascript jQuery 網站
    全站熱搜
    創作者介紹
    創作者 小甲學習地 的頭像
    小甲學習地

    學習資訊部落

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