tab
: 한 페이지안에서 공간을 효율적으로 사용하면서 다양한 내용을 보여줄 때 많이 활용되는 UI
구현해야 할 사항
1. 함수 showContent를 작성하고 메뉴를 클릭하면 모든 요소를 안 보이도록 하고,
클릭한 그 메뉴의 순번(index)을 확인하여 해당 숫자에 맞는 내용을 보이도록 한다.
2. 페이지가 열리자마자 첫 번째가 보이도록 함수 showContent에 첫 번째가 보이도록 실행한다.
3. 메뉴를 클릭하면 클릭된 그 요소의 인덱스 번호를 확인하여 함수 showContent에 넘겨준다.
4. 클릭된 링크의 위치와 너비를 확인하여 highlight의 left 값과 width 값으로 설정해준다.
예제)
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>javascript tab_highight_base</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="tab-wrapper">
<div class="nav">
<ul class="tab-menu">
<li><a href="#tabs-1">basic</a></li>
<li><a href="#tabs-2">advanced</a></li>
<li><a href="#tabs-3">expert</a></li>
</ul><!--.tab-menu-->
<span class="highlight"></span>
</div><!--.nav-->
<div id="tab-content">
<div id="tabs-1">
<h2>Basic plan</h2>
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu.
Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.
Etiam aliquet massa et lorem.</p>
</div>
<div id="tabs-2">
<h2>Advanced Plan</h2>
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante,
ut pharetra massa metus id nunc. Duis scelerisque molestie turpis.
Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus,
ut tempus eros massa ut dolor. Aenean aliquet fringilla sem.</p>
</div>
<div id="tabs-3">
<h2>Expert Plan</h2>
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti.
Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat,
eu congue orci lorem eget lorem. Vestibulum non ante. </p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna.
Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque.
Praesent blandit adipiscing velit. Suspendisse potenti.</p>
</div>
</div><!--.tab-content-->
</div><!--.tab-wrapper-->
<script src="script.js"></script>
</body>
</html>
.tab-wrapper { width:960px; margin:auto;}
.tab-menu {padding-left:0; position: relative; z-index:1; display:flex; gap:20px;}
.tab-menu li {list-style:none; }
.tab-menu li a{ color:#999; text-transform:uppercase; font-weight:bold;
line-height:27px; text-decoration:none; padding:0 20px; display: block;}
#tab-content {min-height: 300px;}
.tab-menu li a.active{
color: #fff;
}
.nav {
position: relative;
}
.highlight{
position: absolute;
width: 98px;
top:0;
left:0;
bottom:0;
background:#000;
transition:0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
| ★ 변수를 지정할 대상을 생각해보면 메뉴를 클릭하기 때문에 .tab-menu li를 선택한다. 클릭했을 때 #tab-content의 자식요소인 div 중 링크와 맞는 내용을 보이도록 해야하니 #tab-content>div도 선택한다. 메뉴를 클릭했을 때 움직일 highlight도 변수로 지정한다. 변수를 지정할 때 주의점은 해당 요소가 하나의 요소인지 아니면 여러 개가 있어 배열로 지정해야 할 요소인지 구분하는 것. (querySelector를 쓸 지 querySelectorAll을 쓸 지 구분한다.) |
//변수지정.
const tabMenu = document.querySelectorAll('.tab-menu li');
const tagContent = document.querySelectorAll('#tab-content>div');
const highLight = document.querySelector('highlight');
- 변수는 한 번 지정하면 변경될 일이 없기 때문에 const를 이용하여 생성한다.
- 이 때 메뉴와 내용들은 여러 개가 있어 배열로 지정해야 하기 때문에 querySelectorAll을 이용한다.
| 구현해야 할 사항 1. 함수 showContent를 작성하고 메뉴를 클릭하면 모든 요소를 안 보이도록 하고, 클릭한 그 메뉴의 순번(index)을 확인하여 해당 숫자에 맞는 내용을 보이도록 한다. 2. 페이지가 열리자마자 첫 번째가 보이도록 함수 showContent에 첫 번째가 보이도록 실행한다. |
//showContent함수
function showContent(num){ // 함수 showContent에 입력되는 숫자는 num이라는 매개변수에 담는다.
tabContent.forEach(function(item){
item.style.display = 'none'; // 모든 탭의 내용을 안 보이도록 한다.
});
tabContent[num].style.display = 'block';
// tabContent배열에서 인덱스 번호 num에 해당하는 원소를 보이도록 한다.
}
//1번 내용 활성화
showContent(0);
// 함수 showContent에 숫자 0을 넘겨서 스크립트가 작동하면 첫번째 내용이 보이도록 한다.
| 구현해야 할 사항 3. 메뉴를 클릭하면 클릭된 그 요소의 인덱스 번호를 확인하여 함수 showContent에 넘겨준다. |
//메뉴 클릭 이벤트
tabMenu.forEach(function(item, idx){
item.addEventListener('click',function(e){
e.preventDefault();
showContent(idx);
});
});
forEach를 통해 tabMenu의 어느 li를 클릭하든 설정한 함수가 작동하도록 한다.
e.preventDefault() 함수로 HTML상에서 클릭하면 해당위치로 이동하는 링크의 기능을 작동하지 않도록 막는다.
링크의 기본 속성을 막기 위해서는 클릭된 그 요소의 기본속성을 함수 안으로 가지고 와야 하기 때문에
function 함수의 매개변수로 e를 입력한다.
이때 e는 event, ev 등 다양하게 명명할 수 있다.
forEach반복문에서 변수 tabMenu에 저장되어 있는 각각의 메뉴는 item에,
그 각 메뉴의 고유 인덱스번호는 idx에 할당한다.
그래서 함수 showContent에 idx를 넣어 일을 시킬 수 있는 것이다.
| 브라우저 화면을 확인해보면 ADVANCED 메뉴를 클릭시 탭 내용 중 인덱스 번호 1번인 Advanced Plan내용이 나타난다. EXPERT 메뉴를 클릭해도 해당 인덱스 번호의 내용이 잘 나타난다 |
★
e.preventDefault()
: 이벤트의 기본 동작을 막는 역할을 하는 함수
주로 링크나 폼 제출에서 사용.
(링크 - 클릭 시 새창 띄우기를 막고 자바스크립트 코드 실행
폼 제출 - 새로고침을 막고 자바스크립트 코드 실행)
| ex : 링크 기존) 클릭이벤트 발생 -> 해당 링크 주소로 이동 메소드 호출시) 링크 주소로 이동하지 않고(해당 기본 동작을 막고) 자바스크립트코드에서 다른 동작을 수행할 수 있게 됨 |
e.stopPropagation()
: 이벤트의 전파(하위요소에서 발생한 이벤트가 상위요소까지 전파되는 것)를 막는 역할
마지막으로 메뉴를 클릭했을 때 움직일 highlight 구현하기
| 구현해야 할 사항 4. 클릭된 링크의 위치와 너비를 확인하여 highlight의 left 값과 width 값으로 설정해준다. |
이 항목을 구현하려면 우선 클릭 이벤트가 일어난 요소가 기준 위치에서 어느 위치에 있는지
그 요소의 left 값과 너비를 확인할 수 있는 함수를 사용한다.
(예제에서는 .tab-menu가 기준)
| offsetLeft | 가까운 부모 중 position속성이 기본값이 아닌 요소의 좌측에서부터의 거리를 반환 |
| offsetWidth | 요소의 border까지의 크기를 반환 |
//메뉴 클릭 이벤트
tabMenu.forEach(function(item, idx){
item.addEventListener('click',function(e){
e.preventDefault();
showContent(idx);
moveHighlight(idx); // 클릭했을 때 실행할 함수로 추가
});
});
//moveHighlight 함수가 할 일 작성
function moveHighlight(num){
const newLeft = tabMenu[num].offsetLeft;
const newWidth = tabMenu[num].offsetWidth;
console.log(newLeft, newWidth);
} /* 이 함수는 숫자가 들어오면 해당 숫자에 맞는 메뉴를 찾아서
그 메뉴가 기준 위치에서 어느 거리에 있는지 파악하고 너비도 확인한다.*/
두 번째 메뉴인 ADVANCED 링크를 클릭하면 106과 128이 출력된다.
클릭된 두번 째 메뉴는 기준 위치 tab-menu의 왼쪽에서 106px 떨어져있고, 메뉴의 너비는 128px라는 것이다.
이제 해당 수치를 이용하여 highlight를 움직이도록 코드를 작성한다.
//moveHighlight 함수가 할 일 작성
function moveHighlight(num){
const newLeft = tabMenu[num].offsetLeft;
const newWidth = tabMenu[num].offsetWidth;
console.log(newLeft, newWidth);
highLight.style.left = newLeft + 'px';
highLight.style.width = newWidth + 'px';
}
완성
'Study > 예제' 카테고리의 다른 글
| [예제] 디자인 된 웹 페이지 구현하기 (순서, tip) (0) | 2023.05.03 |
|---|---|
| [slideshow] innerHTML, innerText, 템플릿 리터럴(``) 외 슬라이드 관련 함수들 (0) | 2023.05.01 |
| [back to Top] scrollTo 외 스크롤 관련 함수들 (0) | 2023.05.01 |
| [modal] data-, pointer-events, getAttribute, setAttribute (0) | 2023.05.01 |
| [accordion] classList.add , classList.remove (0) | 2023.04.27 |
