點選一個按鈕使其樣式發生變化，再點選另一個按鈕發生同樣變化，但上一個按鈕樣式復原

yg94web發表於2020-11-01

可以使用三行jQuery程式碼實現這種效果

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <title>6666</title>
    <style>
        .son{
            width: 60px;
            height: 40px;
            background-color: red;
            margin-top: 10px;
        }
        .change{
            background-color: blue;
        }
        .father{

        }
    </style>
    <script src="js/jquery.js"></script>
     <script>
         $(function (){
             //第一種方法
             // $('.father').on('click','.son',function(){
             //     $(this).addClass("change").siblings().removeClass("change");
             //  });
             //第二種方法
             $(".father").delegate(".son","click",function (){
                    $(this).addClass("change").siblings().removeClass("change");
             })
         });
     </script>
</head>
<body>
<div class="father">
    <div class="son">1</div>
    <div class="son">2</div>
    <div class="son">3</div>
    <div class="son">4</div>
</div>
</body>
</html>

效果

初始執行效果:
在這裡插入圖片描述

點選第一個div：在這裡插入圖片描述點選第二個div：在這裡插入圖片描述

相關文章