Question

我有以下代码。如何编辑我的代码，以便第三个定价计划始终以蓝色突出显示？如果我点击另一张桌子，前一张桌子（包括第三张桌子）不亮？提前谢谢！

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

首先，最简单的方法是将active类添加到HTML中的第三个计划中。这将首先突出显示它，然后在有人点击不同的计划时删除突出显示。

如果您真的为第三个计划设置了蓝色的心，我建议您添加另一个CSS类，可能是active-blue或类似的东西，并将代码更改为

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

Answer 2

尝试将不同的类应用于第三个框，请查看下面的代码段：

＆＃13;

datePicker.updateDate(dateParts[0], dateParts[1], dateParts[2]);

＆＃13;

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

＆＃13;

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

＆＃13;

希望这有帮助！

Answer 3

我在名为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>

如何使一列始终突出显示

3 个答案: