Как соединить инпут и ид
Пытаюсь сделать табы, но не понимаю как сделать так чтобы input в положении "checked" показывал блок(display:block) Вот как я пытался соединить:
#tab-btn-1:checked #content-1,
#tab-btn-2:checked #content-2,
#tab-btn-3:checked #content-3,
#tab-btn-4:checked #content-4,
#tab-btn-5:checked #content-5 {
display: block;
}
Весь код:
<div class="client__blocks tabs">
<aside class="client__info">
<div class="client__info_block">
<input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
<label for="tab-btn-1" class="client__info-text">Personal details</label>
</div>
<div class="client__info_block">
<input type="radio" name="tab-btn" id="tab-btn-2" value="">
<label for="tab-btn-2" class="client__info-text">Preferences</label>
</div>
<div class="client__info_block">
<input type="radio" name="tab-btn" id="tab-btn-3" value="">
<label for="tab-btn-3" class="client__info-text">Payment Details</label>
</div>
<div class="client__info_block">
<input type="radio" name="tab-btn" id="tab-btn-4" value="">
<label for="tab-btn-4" class="client__info-text">My Bookings</label>
</div>
<div class="client__info_block">
<input type="radio" name="tab-btn" id="tab-btn-5" value="">
<label for="tab-btn-5" class="client__info-text">My documents</label>
</div>
</aside>
<div class="client__block" id="content-1">
<div class="client__block-info">
<p class="client__block-intro">Name</p>
<p class="client__block-text">Igor Vensko</p>
<a href="#" class="client__block-edit">Edit</a>
</div>
<div class="client__block-info">
<p class="client__block-intro">Email address</p>
<p class="client__block-text">[email protected]</p>
<a href="#" class="client__block-edit">Edit</a>
</div>
<div class="client__block-info">
<p class="client__block-intro">Phone number</p>
<p class="client__block-text">+01 123 456 789</p>
<a href="#" class="client__block-edit">Edit</a>
</div>
<div class="client__block-info">
<p class="client__block-intro">Date of birth</p>
<p class="client__block-text">Enter your date of birth</p>
<a href="#" class="client__block-edit">Edit</a>
</div>
<div class="client__block-info">
<p class="client__block-intro">Nationality</p>
<p class="client__block-text">Polska</p>
<a href="#" class="client__block-edit">Edit</a>
</div>
<div class="client__block-info">
<p class="client__block-intro">Gender</p>
<p class="client__block-text">I'm a man</p>
<a href="#" class="client__block-edit">Edit</a>
</div>
<div class="client__block-info">
<p class="client__block-intro">Address</p>
<p class="client__block-text">Poland, Bialsytok</p>
<a href="#" class="client__block-edit">Edit</a>
</div>
</div>
<div class="client__block" id="content-2">
<div class="client__block-info">
<p class="client__block-intro">Currency</p>
<p class="client__block-text">PLN Polish Zlotyo</p>
<a href="#" class="client__block-edit">Edit</a>
</div>
<div class="client__block-info">
<p class="client__block-intro">Language</p>
<p class="client__block-text client_icon-usa">American English</p>
<a href="#" class="client__block-edit">Edit</a>
</div>
</div>
<div class="client__block" id="content-3">
<div class="client__block-info">
<p class="client__block-intro">Payment cards</p>
<p class="client__block-text">Pay with new card</p>
<a href="#" class="client__block-edit">Add card</a>
</div>
</div>
<div class="client__block" id="content-4">
<div class="client__blocks-pic">
<div class="client__block_pic">
<img src="img/Winter park.jpg" alt="Winter park" class="slider__bar-image">
<div class="client__block-signature">
<p class="client__signature-text">Winter Park Ski Holiday</p>
<a href="#" class="client__signature-link">Downoload pdf</a>
</div>
</div>
<div class="client__block_pic">
<img src="img/Machu Picchu.jpg" alt="Winter park" class="slider__bar-image">
<div class="client__block-signature">
<p class="client__signature-text">Winter Park Ski Holiday</p>
<a href="#" class="client__signature-link">Downoload pdf</a>
</div>
</div>
<div class="client__block_pic">
<img src="img/Hivar.jpg" alt="Winter park" class="slider__bar-image">
<div class="client__block-signature">
<p class="client__signature-text">Winter Park Ski Holiday</p>
<a href="#" class="client__signature-link">Downoload pdf</a>
</div>
</div>
<div class="client__block_pic">
<img src="img/Wadi Musa.jpg" alt="Winter park" class="slider__bar-image">
<div class="client__block-signature">
<p class="client__signature-text">Winter Park Ski Holiday</p>
<a href="#" class="client__signature-link">Downoload pdf</a>
</div>
</div>
</div>
</div>
<div class="client__block" id="content-5">
<div class="client__block-info">
<p class="client__block-intro">ID scan.pdf</p>
<a href="#" class="client__block-edit client__block-remove">Remove</a>
</div>
<div class="client__block-info">
<p class="client__block-intro">Trip plan.doc</p>
<a href="#" class="client__block-edit client__block-remove">Remove</a>
</div>
<div class="client__block-link">
<a href="#" class="client__link">Upload documents</a>
</div>
</div>
</div>
.tabs input[type="radio"] {
display: none;
}
.tabs input[type="radio"]:checked+label {
font-weight: bold;
}
.client__block {
display: none;
}
#tab-btn-1:checked #content-1,
#tab-btn-2:checked #content-2,
#tab-btn-3:checked #content-3,
#tab-btn-4:checked #content-4,
#tab-btn-5:checked #content-5 {
display: block;
}
Извиняюсь если не понятно объяснил, если есть какой либо вопрос по коду - спрашивайте. Так же загрузил код на CodePen - https://codepen.io/hodor72/pen/wvpvxqp
Ответы (1 шт):
Автор решения: Andrey Fedorov
→ Ссылка
Ну а почему это должно работать по вашему? #tab-btn-1:checked #content-1 означает, что блок с id="content-1 вложен в блок с id="tab-btn-1", но такого не может быть, поскольку у вас tab-btn-1 - это input. Для того, что все это заработало, вам нужно чтобы content-1 шел сразу за tab-btn-1, на одном уровне вложенности. Тогда вы сможете использовать селекторы типа #tab-btn-1:checked + #content-1 или #tab-btn-1:checked ~ #content-1 и все заработает.
Однако, вы совершенно зря вешаете интерактив на html+css. Это засоряет код. Попробуйте сделать тоже самое на js. Тут он самый базовый, как раз чтобы начать.
.tabs input[type="radio"] {
display: none;
}
.tabs input[type="radio"]:checked+label {
font-weight: bold;
}
.client__block {
display: none;
}
#tab-btn-1:checked+#content-1,
#tab-btn-2:checked+#content-2,
#tab-btn-3:checked+#content-3,
#tab-btn-4:checked+#content-4,
#tab-btn-5:checked+#content-5 {
display: block;
}<div class="client__blocks tabs">
<aside class="client__info">
<div class="client__info_block">
<label for="tab-btn-1" class="client__info-text">Personal details</label>
</div>
<div class="client__info_block">
<label for="tab-btn-2" class="client__info-text">Preferences</label>
</div>
<div class="client__info_block">
<label for="tab-btn-3" class="client__info-text">Payment Details</label>
</div>
<div class="client__info_block">
<label for="tab-btn-4" class="client__info-text">My Bookings</label>
</div>
<div class="client__info_block">
<label for="tab-btn-5" class="client__info-text">My documents</label>
</div>
</aside>
<input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
<div class="client__block" id="content-1">
<div class="client__block-info">
<p class="client__block-intro">Name</p>
<p class="client__block-text">Igor Vensko</p>
<a href="#" class="client__block-edit">Edit</a>
</div>
<div class="client__block-info">
<p class="client__block-intro">Email address</p>
<p class="client__block-text">[email protected]</p>
<a href="#" class="client__block-edit">Edit</a>
</div>
<div class="client__block-info">
<p class="client__block-intro">Phone number</p>
<p class="client__block-text">+01 123 456 789</p>
<a href="#" class="client__block-edit">Edit</a>
</div>
<div class="client__block-info">
<p class="client__block-intro">Date of birth</p>
<p class="client__block-text">Enter your date of birth</p>
<a href="#" class="client__block-edit">Edit</a>
</div>
<div class="client__block-info">
<p class="client__block-intro">Nationality</p>
<p class="client__block-text">Polska</p>
<a href="#" class="client__block-edit">Edit</a>
</div>
<div class="client__block-info">
<p class="client__block-intro">Gender</p>
<p class="client__block-text">I'm a man</p>
<a href="#" class="client__block-edit">Edit</a>
</div>
<div class="client__block-info">
<p class="client__block-intro">Address</p>
<p class="client__block-text">Poland, Bialsytok</p>
<a href="#" class="client__block-edit">Edit</a>
</div>
</div>
<input type="radio" name="tab-btn" id="tab-btn-2" value="">
<div class="client__block" id="content-2">
<div class="client__block-info">
<p class="client__block-intro">Currency</p>
<p class="client__block-text">PLN Polish Zlotyo</p>
<a href="#" class="client__block-edit">Edit</a>
</div>
<div class="client__block-info">
<p class="client__block-intro">Language</p>
<p class="client__block-text client_icon-usa">American English</p>
<a href="#" class="client__block-edit">Edit</a>
</div>
</div>
<input type="radio" name="tab-btn" id="tab-btn-3" value="">
<div class="client__block" id="content-3">
<div class="client__block-info">
<p class="client__block-intro">Payment cards</p>
<p class="client__block-text">Pay with new card</p>
<a href="#" class="client__block-edit">Add card</a>
</div>
</div>
<input type="radio" name="tab-btn" id="tab-btn-4" value="">
<div class="client__block" id="content-4">
<div class="client__blocks-pic">
<div class="client__block_pic">
<img src="img/Winter park.jpg" alt="Winter park" class="slider__bar-image">
<div class="client__block-signature">
<p class="client__signature-text">Winter Park Ski Holiday</p>
<a href="#" class="client__signature-link">Downoload pdf</a>
</div>
</div>
<div class="client__block_pic">
<img src="img/Machu Picchu.jpg" alt="Winter park" class="slider__bar-image">
<div class="client__block-signature">
<p class="client__signature-text">Winter Park Ski Holiday</p>
<a href="#" class="client__signature-link">Downoload pdf</a>
</div>
</div>
<div class="client__block_pic">
<img src="img/Hivar.jpg" alt="Winter park" class="slider__bar-image">
<div class="client__block-signature">
<p class="client__signature-text">Winter Park Ski Holiday</p>
<a href="#" class="client__signature-link">Downoload pdf</a>
</div>
</div>
<div class="client__block_pic">
<img src="img/Wadi Musa.jpg" alt="Winter park" class="slider__bar-image">
<div class="client__block-signature">
<p class="client__signature-text">Winter Park Ski Holiday</p>
<a href="#" class="client__signature-link">Downoload pdf</a>
</div>
</div>
</div>
</div>
<input type="radio" name="tab-btn" id="tab-btn-5" value="">
<div class="client__block" id="content-5">
<div class="client__block-info">
<p class="client__block-intro">ID scan.pdf</p>
<a href="#" class="client__block-edit client__block-remove">Remove</a>
</div>
<div class="client__block-info">
<p class="client__block-intro">Trip plan.doc</p>
<a href="#" class="client__block-edit client__block-remove">Remove</a>
</div>
<div class="client__block-link">
<a href="#" class="client__link">Upload documents</a>
</div>
</div>
</div>