我該如何解除不活動塊

Question

配對，我有以下代碼。如果我點擊一張桌子，它會突出顯示，然後如果我點擊另一張桌面，則前一張會保持點亮狀態，下一張則會點亮。我如何編輯它，以便如果我點擊另一張桌子，上一張桌子不亮？

$('.pricing-customer').on('click', function(){ 
 
    $(this).toggleClass('active'); 
 
    $(this).children().toggleClass('active'); 
 
});

.pricing-customer { 
 
    background: #fff; 
 
    min-height: 250px; 
 
    cursor: pointer; 
 
    transition: all .3s ease-in-out; 
 
    margin-bottom: 20px; 
 
    padding: 10px 0px 25px 0px; 
 
} 
 
p.pricing-number { 
 
    font-size: 52px; 
 
    margin-bottom: 10px; 
 
    margin-top: 20px; 
 
    color: #fead0d; 
 
} 
 
p.pricing-monthes { 
 
    color: #5e6977; 
 
    font-size: 14px; 
 
    line-height: 21px; 
 
    padding-bottom: 20px; 
 
    border-bottom: 1px solid #e1e8ee; 
 
} 
 
p.emails { 
 
    color: #444; 
 
    font-size: 16px; 
 
    line-height: 21px; 
 
} 
 
.pricing-customer:hover, .pricing-customer.active { 
 

 
background-color: #333; 
 
} 
 
.pricing-customer:hover p , .pricing-customer p.active{ 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="pricing-customer col-sm-12 col-sm-3 text-center"> 
 
    <h3><?php echo $t_title; ?></h3> 
 
    <p class="pricing-number">$ 70</p> 
 
    <br> 
 
    <p class="pricing-monthes">per week/month</p> 
 
    <p class="pricing-emails">100 000 emails</p> 
 
</div> 
 

 
<div class="pricing-customer col-sm-12 col-sm-3 text-center"> 
 
    <h3><?php echo $t_title; ?></h3> 
 
    <p class="pricing-number">$ 70</p> 
 
    <br> 
 
    <p class="pricing-monthes">per week/month</p> 
 
    <p class="pricing-emails">100 000 emails</p> 
 
</div> 
 

 
<div class="pricing-customer col-sm-12 col-sm-3 text-center"> 
 
    <h3><?php echo $t_title; ?></h3> 
 
    <p class="pricing-number">$ 70</p> 
 
    <br> 
 
    <p class="pricing-monthes">per week/month</p> 
 
    <p class="pricing-emails">100 000 emails</p> 
 
</div>

Answer 1

，而不是兒童使用siblings。我希望這是你想要的。

$('.pricing-customer').on('click', function(){ 
 
    $(this).toggleClass('active'); 
 
    $(this).siblings().removeClass('active'); 
 
});

.pricing-customer { 
 
    background: #fff; 
 
    min-height: 250px; 
 
    cursor: pointer; 
 
    transition: all .3s ease-in-out; 
 
    margin-bottom: 20px; 
 
    padding: 10px 0px 25px 0px; 
 
} 
 
p.pricing-number { 
 
    font-size: 52px; 
 
    margin-bottom: 10px; 
 
    margin-top: 20px; 
 
    color: #fead0d; 
 
} 
 
p.pricing-monthes { 
 
    color: #5e6977; 
 
    font-size: 14px; 
 
    line-height: 21px; 
 
    padding-bottom: 20px; 
 
    border-bottom: 1px solid #e1e8ee; 
 
} 
 
p.emails { 
 
    color: #444; 
 
    font-size: 16px; 
 
    line-height: 21px; 
 
} 
 
.pricing-customer:hover, .pricing-customer.active { 
 

 
background-color: #333; 
 
} 
 
.pricing-customer:hover p , .pricing-customer.active p{ 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="pricing-customer col-sm-12 col-sm-3 text-center"> 
 
    <h3><?php echo $t_title; ?></h3> 
 
    <p class="pricing-number">$ 70</p> 
 
    <br> 
 
    <p class="pricing-monthes">per week/month</p> 
 
    <p class="pricing-emails">100 000 emails</p> 
 
</div> 
 

 
<div class="pricing-customer col-sm-12 col-sm-3 text-center"> 
 
    <h3><?php echo $t_title; ?></h3> 
 
    <p class="pricing-number">$ 70</p> 
 
    <br> 
 
    <p class="pricing-monthes">per week/month</p> 
 
    <p class="pricing-emails">100 000 emails</p> 
 
</div> 
 

 
<div class="pricing-customer col-sm-12 col-sm-3 text-center"> 
 
    <h3><?php echo $t_title; ?></h3> 
 
    <p class="pricing-number">$ 70</p> 
 
    <br> 
 
    <p class="pricing-monthes">per week/month</p> 
 
    <p class="pricing-emails">100 000 emails</p> 
 
</div>