[simpleExample] JS Tab Menu

 

 

 

 

 

1. JS 만을 활용한 TAB 메뉴 구성

2. 탭 메뉴 클릭시 컨텐츠 내용 변경

3. 탭 메뉴 클릭시 메뉴의 디자인 변경

 

HTML

 

<div class="menu-area">

<ul class="tab js-tab">

<li class="select"><i class="fas fa-home"></i> Home</li>

<li><i class="far fa-file"></i> Resume</li>

<li><i class="far fa-address-card"></i> Self introduvtion</li>

<li><i class="fas fa-code"></i> Portfolio</li>

<li><i class="far fa-grin-wink"></i> Connect</li>

</ul>

</div>

<div class="tab-contents js-contents">

<p class="visible">

안녕하세요 CodeReading 소개에 오신것을 환영합니다.

</p>

<p>

이력서

</p>

<p>

자기소개

</p>

<p>포트폴리오</p>

<p>연락처</p>

</div>

CSS

 

* {

margin:0;

padding:0;

}

.tab {

width:100%;

height:40px;

background: #eeeeee;

display: flex;

justify-content: center;

align-items:center;

list-style:none;

}

.tab li {

margin:0 1rem;

cursor:pointer;

padding:1rem 2rem;

}

.select {

background: blue;

color:white;

}

.tab-contents {

position: relative;

width:700px;

height:500px;

margin:0 auto;

}

.tab-contents p {

position:absolute;

top:0;

left:0;

margin:3rem;

opacity:0;

transition: all 1s;

}

.tab-contents .visible {

opacity:1;

}

 

 

JS

 

// 탭관련 변수 지정

var tabMenu = document.querySelector('.js-tab');

var menuItems = tabMenu.querySelectorAll('li');

var selectContents = document.querySelector(".js-contents");

var content = selectContents.querySelectorAll("p");

// 선택된 탭의 index 에 따라 컨텐츠 내용 보이기

function tabContent(e) {

let menuIndex = [...menuItems].indexOf(e.target);

[...content].map(cont =>

[...content].indexOf(cont) === menuIndex ?

cont.classList.add("visible") :

cont.classList.remove("visible"))

};

function setSelectItem(e) {

[...menuItems].forEach(item =>

item.classList.value === "select" ?

item.classList.remove("select") :

e.target.classList.add("select"));

 

if(e.target.classList.value !== "select"){

e.target.classList.add("select");

};

tabContent(e);

};

// 이벤트 등록

function initEvent() {

[...menuItems].map(item =>

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

e.stopPropagation();

setSelectItem(e);

}))

};

// 요소 초기화

function init() {

initEvent();

};

init();

 

 

 

code-reading 블로그에 방문해 주셔서 환영합니다.
댓글은 모두 환영하니 많이 달아주세요.