1

Всем привет, такая задача:

Нужно чтобы при клике на один из блоков ("тарифов") тому добавлялся класс .active и у блока появлялась рамка. При этом нажав на другой блок, рамка с прошлого убиралась. С помощью jQuery.

У меня в голове только одно решение: каждому блоку дать отдельный класс - но это ведь неправильно, ибо слишком много кода. А если добавить .active в класс .plan__blocks__block то рамка будет у всех блоков, разве нет?

Спасибо.

.plan__blocks {
  display: flex;
  justify-content: center;
}

.plan__blocks__block {
  height: 448px;
  width: 231px;
  margin: 0 1.25px;
}

.plan__blocks__block__lower {
  height: 320px;
  background: #1f282c;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.plan__blocks__block__lower p {
  font-size: 14px;
  font-weight: 100;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  letter-spacing: 1.5px;
  text-align: center;
  margin-bottom: 16px;
}



.plan__blocks__block__lower a {
  background: #f6744b;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  box-sizing: border-box;
  padding: 10px 21px;
  border-radius: 3px;
  letter-spacing: 2px;
  align-self: center;
  margin-top: 60px;
}

.active {
  border: 1px solid #f6744b;
}
<div class="plan__blocks">
  <div class="plan__blocks__block">
    <div class="plan__blocks__block__title">
      <h3>Basic</h3>
      <p>Free</p>
    </div>
    <div class="plan__blocks__block__lower">
      <p><span>20</span> Pages</p>
      <p><span>2</span> GB Storage</p>
      <p><span>150</span> Members</p>
      <p><span>2</span> Contributors</p>
      <a href="#">Purchase</a>
    </div>
  </div>
  <div class="plan__blocks__block">
    <div class="plan__blocks__block__title">
      <h3>Standart</h3>
      <p><span>$</span>24.00</p>
    </div>
    <div class="plan__blocks__block__lower">
      <p><span>25</span> Pages</p>
      <p><span>10</span> GB Storage</p>
      <p><span>300</span> Members</p>
      <p><span>5</span> Contributors</p>
      <a href="#">Purchase</a>
    </div>
  </div>
  <div class="plan__blocks__block">
    <div class="plan__blocks__block__title">
      <h3>Premium</h3>
      <p><span>$</span>40.00</p>
    </div>
    <div class="plan__blocks__block__lower">
      <p><span>30</span> Pages</p>
      <p><span>20</span> GB Storage</p>
      <p><span>500</span> Members</p>
      <p><span>10</span> Contributors</p>
      <a href="#">Purchase</a>
    </div>
  </div>
  <div class="plan__blocks__block">
    <div class="plan__blocks__block__title">
      <h3>Professional</h3>
      <p><span>$</span>75.00</p>
    </div>
    <div class="plan__blocks__block__lower">
      <p><span>40</span> Pages</p>
      <p><span>40</span> GB Storage</p>
      <p><span>1000</span> Members</p>
      <p><span>20</span> Contributors</p>
      <a href="#">Purchase</a>
    </div>
  </div>
</div>

1 ответ 1

1

$(".plan__blocks__block .plan__blocks__block__lower a").click(function(e){
  e.preventDefault();
  $(this).closest(".plan__blocks").find(".plan__blocks__block.active").removeClass("active");
  $(this).closest(".plan__blocks__block").addClass("active");
});
.plan__blocks {
  display: flex;
  justify-content: center;
}

.plan__blocks__block {
  height: 448px;
  width: 231px;
  margin: 0 1.25px;
  border: 2px solid transparent;
}

.plan__blocks__block__lower {
  height: 320px;
  background: #1f282c;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.plan__blocks__block__lower p {
  font-size: 14px;
  font-weight: 100;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  letter-spacing: 1.5px;
  text-align: center;
  margin-bottom: 16px;
}



.plan__blocks__block__lower a {
  background: #f6744b;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  box-sizing: border-box;
  padding: 10px 21px;
  border-radius: 3px;
  letter-spacing: 2px;
  align-self: center;
  margin-top: 60px;
}

.active {
  border: 2px solid #f6744b;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="plan__blocks">
  <div class="plan__blocks__block">
    <div class="plan__blocks__block__title">
      <h3>Basic</h3>
      <p>Free</p>
    </div>
    <div class="plan__blocks__block__lower">
      <p><span>20</span> Pages</p>
      <p><span>2</span> GB Storage</p>
      <p><span>150</span> Members</p>
      <p><span>2</span> Contributors</p>
      <a href="#">Purchase</a>
    </div>
  </div>
  <div class="plan__blocks__block">
    <div class="plan__blocks__block__title">
      <h3>Standart</h3>
      <p><span>$</span>24.00</p>
    </div>
    <div class="plan__blocks__block__lower">
      <p><span>25</span> Pages</p>
      <p><span>10</span> GB Storage</p>
      <p><span>300</span> Members</p>
      <p><span>5</span> Contributors</p>
      <a href="#">Purchase</a>
    </div>
  </div>
  <div class="plan__blocks__block">
    <div class="plan__blocks__block__title">
      <h3>Premium</h3>
      <p><span>$</span>40.00</p>
    </div>
    <div class="plan__blocks__block__lower">
      <p><span>30</span> Pages</p>
      <p><span>20</span> GB Storage</p>
      <p><span>500</span> Members</p>
      <p><span>10</span> Contributors</p>
      <a href="#">Purchase</a>
    </div>
  </div>
  <div class="plan__blocks__block">
    <div class="plan__blocks__block__title">
      <h3>Professional</h3>
      <p><span>$</span>75.00</p>
    </div>
    <div class="plan__blocks__block__lower">
      <p><span>40</span> Pages</p>
      <p><span>40</span> GB Storage</p>
      <p><span>1000</span> Members</p>
      <p><span>20</span> Contributors</p>
      <a href="#">Purchase</a>
    </div>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.