[CodingApple] 탭(Tab) 기능

Nadia·2024년 2월 28일

CodingApple

목록 보기

13/20

탭(Tab)

: 버튼을 누르면 해당 <div> 박스가 보이는 기능

구현 계획

버튼, 박스 3개씩 준비
버튼을 누르면

선택한 버튼 알려주기
- 모든 버튼에 붙은 'orange' 클래스 제거
- 해당 버튼에 'orange' 클래스 추가
내용 박스 보여주기
- 모든 버튼에 붙은 'show' 클래스 제거
- 해당 버튼에 'show' 클래스 추가

.show {
   display: block;
}

탭(Tab) 만들기

case 1

.tab_menu .list의 <li>안에 있는 각 버튼에 'click' 이벤트 걸기
(for문)
<a> 태그 클릭 시 href로 인한 화면 이동 막기
(preventDefault())
버튼 클릭 시 다른 부모 요소(다른 <li>태그들)의 is_on 클래스 제거하기
(remove('is_on'))
버튼 클릭 시 해당 버튼의 부모 요소(<li>)에 is_on 클래스 추가하기
(add('is_on'))

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
    </style>
    <link rel="stylesheet" href="main.css">
</head>
<body>

  <div class="wrap">
    <div class="tab_menu">
      <ul class="list">
        <li class="is_on">
          <a href="#tab1" class="btn">이름</a>
          <!-- #tab1 = 버튼과 컨텐츠를 연결해놓음 -->
          <div id="tab1" class="cont">Nadia</div>
        </li>
        <li>
          <a href="#tab2" class="btn">학력</a>
          <div id="tab2" class="cont">Russian</div>
        </li>
        <li>
          <a href="#tab3" class="btn">스펙</a>
          <div id="tab3" class="cont">HTML, CSS, Javascript, Java</div>
        </li>
      </ul>
    </div>
  </div>

<script src="index.js"></script>
</body>
</html>

index.js

const tabList = document.querySelectorAll('.tab_menu .list li');


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

  tabList[i].querySelector('.btn').addEventListener('click', function(e) {
    e.preventDefault(); // <a> 태그를 사용했기 때문에 링크로 이동하는 것을 막음

    // 모든 요소에서 선택 클래스 제거
    for (var j = 0; j < tabList.length; j++){
      tabList[j].classList.remove('is_on');
    }
    
    // 해당 요소의 부모 노드에 클래스 추가
    this.parentNode.classList.add('is_on');
  });
}

main.css

* { 
    font-family: "Gowun Dodum", sans-serif;
    margin:10; 
    padding:0;
}

/* 전체 구조 */
.wrap {
    padding:15px; 
    letter-spacing:-0.5px;
}

/* 순서 없는 목록의 아이콘 제거 */
ul {
    list-style:none;
}

/* 버튼 */
a {
    font-size: 20px;
    color:#0c0c0c;
    text-decoration:none; 
    width:100%;
    padding: 10px;
    
}

.tab_menu {
    position: relative;
}

.tab_menu .list {
    overflow:hidden;
}

.tab_menu .list li {
    float:left;
    margin-right:14px;
}

/* 컨텐츠 상자 */
.cont {
    display:none; 
    background:#e8d5d5; 
    color:#282828; 
    font-size: 17px;
    text-align:center; 

    position:absolute; 
    margin-top: 10px;
    top:25px; 
    left:0; 
    width:100%; 
    height:100px; 
    line-height:100px;
}

/* 선택(is_on)되었을 때 디자인 */
.is_on .btn {
    font-weight:bold; 
    color:rgb(215, 108, 8);
}

.is_on .cont {
    display:block;
}

case 2

바닐라 JS

바닐라 JS로는 이게 최선? → 확장성 X
기존의 모든 기능(클래스)를 제거 → 해당 버튼의 기능 추가 순으로 위치해야 함!

for (let i = 0; i < 3; i++) {
    document.getElementsByClassName('tab-button')[i].addEventListener('click', function() {
        document.getElementsByClassName('tab-button')[0].classList.remove('orange')
        document.getElementsByClassName('tab-button')[1].classList.remove('orange')
        document.getElementsByClassName('tab-button')[2].classList.remove('orange')
        document.getElementsByClassName('tab-button')[i].classList.add('orange')

        document.getElementsByClassName('tab-content')[0].classList.remove('show')
        document.getElementsByClassName('tab-content')[1].classList.remove('show')
        document.getElementsByClassName('tab-content')[2].classList.remove('show')
        document.getElementsByClassName('tab-content')[i].classList.add('show')
    });
}

jQuery + 확장성 O

for (let i = 0; i < $('.tab-button').length; i++){

  	$('.tab-button').eq(i).on('click', function(){
    $('.tab-button').removeClass('orange');
    $('.tab-button').eq(i).addClass('orange');
    $('.tab-content').removeClass('show');
    $('.tab-content').eq(i).addClass('show');
  })
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    
    <!-- 탭 -->
    <div class="container mt-5">
        <!-- 버튼 -->
        <ul class="list">
          <li class="tab-button">Products</li>
          <li class="tab-button orange">Information</li>
          <li class="tab-button">Shipping</li>
        </ul>

        <!-- 내용 박스 -->
        <div class="tab-content">
          <p>상품설명입니다. Product</p>
        </div>
        <div class="tab-content show">
        <!-- 'show' 클래스를 붙여서 원하는 버튼 내용만 보여줄 수 있음 -->
          <p>스펙설명입니다. Information</p>
        </div>
        <div class="tab-content">
          <p>배송정보입니다. Shipping</p>
        </div>
      </div> 

<script src="index.js"></script>
</body>
</html>

index.js

// 바닐라 JS
for (let i = 0; i < 3; i++) {
    document.getElementsByClassName('tab-button')[i].addEventListener('click', function() {
        document.getElementsByClassName('tab-button')[0].classList.remove('orange')
        document.getElementsByClassName('tab-button')[1].classList.remove('orange')
        document.getElementsByClassName('tab-button')[2].classList.remove('orange')
        document.getElementsByClassName('tab-button')[i].classList.add('orange')

        document.getElementsByClassName('tab-content')[0].classList.remove('show')
        document.getElementsByClassName('tab-content')[1].classList.remove('show')
        document.getElementsByClassName('tab-content')[2].classList.remove('show')
        document.getElementsByClassName('tab-content')[i].classList.add('show')
    });
}

// jQuery 버전
// for (let i = 0; i < 3; i++) {

//     $('.tab-button').eq(i).on('click', function(){
//       $('.tab-button').removeClass('orange');
//       $('.tab-button').eq(i).addClass('orange');
//       $('.tab-content').removeClass('show');
//       $('.tab-content').eq(i).addClass('show');
//     })
// }

main.css

ul.list {
   list-style-type: none;
   margin: 0;
   padding: 0;
   border-bottom: 1px solid #ccc;
}

ul.list::after {
   content: '';
   display: block;
   clear: both;
}

.tab-button {
   display: block;
   padding: 10px 20px 10px 20px;
   float: left;
   margin-right: -1px;
   margin-bottom: -1px;
   color: grey;
   text-decoration: none;
   cursor: pointer;
}

/* 선택한 버튼 알려주기 */
.orange {
   border-top: 2px solid orange;
   border-right: 1px solid #ccc;
   border-bottom: 1px solid white;
   border-left: 1px solid #ccc;
   color: black;
   margin-top: -2px;
}

.tab-content {
   display: none;
   padding: 10px;
}

/* 버튼 내용 보여주기 */
.show {
   display: block;
}