[JavaScript] siblings() 함수 활용 탭 메뉴 (Tabs) 구성

siblings() 함수(function)로 형제요소를 선택하여 탭 메뉴(Tabs) 구성하는 방법

[html]

<ul>

<li class="tab active">

<a href="#">tab#1</a>

<div class="content">tab#1 content</div>

</li>

<li class="tab">

<a href="#">tab#2</a>

<div class="content">tab#2 content</div>

</li>

<li class="tab">

<a href="#">tab#3</a>

<div class="content">tab#3 content</div>

</li>

</ul>

 

[css]

* { margin: 0; padding: 0; }

ul, li { list-style: none; }

ul {

display: flex;

gap: 2rem;

position: relative;

}

.content {

display: none;

position: absolute;

top: 1.5rem; left: 0;

}

.tab.active .content {

display: block;

}

 

[js]

function siblings(t) {

var children = t.parentElement.children;

var tempArr = [];

for (var i = 0; i < children.length; i++) {

tempArr.push(children[i]);

}

return tempArr.filter(function(e){

return e != t;

});

}; // siblings()

let tab = document.querySelectorAll('.tab')

tab.forEach((item,idx) => {

item.addEventListener('click',function(e){

e.preventDefault();

siblings(e.currentTarget).forEach((i) => {

// e.currentTarget: 클릭된 현재 타겟

i.classList.remove('active')

});

tab[idx].classList.add('active')

});

});

 

See the Pen [JavaScript] siblings() function tabs menu _ siblings() 함수 활용 탭 메뉴 by j. sik (@jsik) on CodePen.