1つの列を常にハイライト表示する方法

Question

次のコードがあります。どのようにしてコードを編集して、3番目の料金プランが常に青色に強調表示されるようにすることができますか？そして、別のテーブルをクリックすると、前のテーブル（3番目も含む）がハイライトされますか？前もって感謝します！

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

Answer 1

にコードを変更することをお勧めしたいです

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

.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; 
 
} 
 

 
.pricing-customer.default { 
 
    background: blue; 
 
    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 default"> 
 
    <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>

希望：3番目のボックスは、以下のスニペットを見てこれは役に立ちます！

Answer 2

私は別のホバーと能動的背景色を持っているpricing-customer-blueと呼ばれる第3列に新しいクラスを追加しました。

$('.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-blue:hover, .pricing-customer-blue.active{ 
 
    background: blue; 
 
} 
 
.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 pricing-customer-blue"> 
 
    <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 3

まず最も簡単なだけで、あなたのHTMLで第三計画にactiveクラスを追加することです。それが最初に強調表示され、誰かが別のプランをクリックすると強調表示が削除されます。

あなたが本当にあなたの心が第三の計画のために青に設定されている場合は、私はに別のクラスを適用してください、多分active-blueまたは類似した何かを別のCSSクラスを追加し、

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