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

Question

[Сергей Тихонов]

Господа, как сделать что бы таб, работал в табе. вроде и все 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

Comments

[Сергей Тихонов]

Moon Presence, пробовал и на js, все равно в 1 табе открывается контент, контент во 2 табе совсем не отображается, как будто не становиться активным. если подскажете как это сделать, буду весьма благодарен.

Answer 1

[maxim]

Зачем здесь 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”;
}

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

И так с каждым табом. Разве не логично ?)

Comments

[Сергей Тихонов]

спасибо, сейчас попробую

[maxim]

Сергей Тихонов, ты понял что нужно дать табам id?

[Сергей Тихонов]

да все сделал, спасибо!

[maxim]

Сергей Тихонов, а где оплата )?

[maxim]

m1 rvi, реали 2020

[Сергей Тихонов]

пиши карту)

[maxim]

Сергей Тихонов,

[maxim]

Сергей Тихонов, да епарасете, почему всем так сложно отметить решением , если я помог?)