Всем привет, такая задача:
Нужно чтобы при клике на один из блоков ("тарифов") тому добавлялся класс .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>