@trayserg56
Немного веб-разрабатываю

Как сделать таб в табе?

5f496add23b91677015165.png

Господа, как сделать что бы таб, работал в табе. вроде и все label ко всем input прописываю, но понимаю что они как то перекликаются.
<div class="tabs">
 <input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
 <label for="tab-btn-1">фото</label>
 <input type="radio" name="tab-btn" id="tab-btn-2" value="">
 <label for="tab-btn-2">видео</label>
					
	<div id="content-1">
		<div class="tabs">
			<input type="radio" name="tab-btn" id="tab-btn-3" value="" checked>
			<label for="tab-btn-3">Город </label>
			<input type="radio" name="tab-btn" id="tab-btn-4" value="">
			<label for="tab-btn-4">Природа</label>
			<input type="radio" name="tab-btn" id="tab-btn-5" value="">
			<label for="tab-btn-5">Архитектура</label>
							
			<div id="content-3">
				Содержимое 1...
			</div>
			<div id="content-4">
				Содержимое 2...
			</div>
			<div id="content-5">
				Содержимое 2...
			</div>
				</div>
				/div>
			<div id="content-2">
				Содержимое 2


			</div>
</div>

.tabs 
	// max-width: 350px
	// margin-left: auto
	// margin-right: auto
	&>input[type="radio"] 
		display: none
		&:checked+label 
			background-color: $var1
	&>div 
		display: none
		border: 1px solid $var2
		padding: 10px 15px
		border-radius: 4px
        display: none
        border: 1px solid #eee
        padding: 10px 15px
        border-radius: 4px
	&>label 
        display: inline-block
        text-align: center
        vertical-align: middle
        user-select: none
        background-color: $var2
        border: 1px solid transparent
        padding: 2px 8px
        font-size: 16px
        line-height: 1.5
        border-radius: 4px
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out
        margin-left: 6px
        cursor: pointer
        margin-bottom: 10px
        &:first-of-type 
            margin-left: 0
		
	
.block
    display: block!important
#tab-btn-1:checked~#content-1
    display: block
#tab-btn-2:checked~#content-2
    display: block
#tab-btn-3:checked~#content-3
    display: block
#tab-btn-4:checked~#content-4
    display: block
#tab-btn-5:checked~#content-5
    display: block
  • Вопрос задан
  • 111 просмотров
Решения вопроса 2
sniggering_deus
@sniggering_deus Куратор тега CSS
Dance Gavin Dance - Prisoner
Ну, если так посмотреть, то можно обойтись и без JS, сделав всё на CSS.



Хотя если смотреть на это с другой стороны, то лучше всё же использовать JS.
Ответ написан
m1rvi
@m1rvi
Отметь блин решением, если помог
Зачем здесь css?
Напишу пример очень простой:
var tab = document.getElementById(“tab”);
var tab2 = document.getElementById(“tab2”);
var tab3 = document.getElementById(“tab3”);

var content = document.getElementById(“tab_content”);
var content2 = document.getElementById(“tab_content2”);
var content3 = document.getElementById(“tab_content3”);

tab.addEventListener(“click”, function() {
content.style.display = “block”;

content3.style.display = “none”;
content2.style.display = “none”;
}

// и дальше сам


И так с каждым табом. Разве не логично ?)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы