상세 컨텐츠

본문 제목

이중탭 만들기

Study/JS

by 개발성훈 2021. 2. 19. 14:45

본문

기존 탭모습

 

일정 넓이로 줄어들면 이렇게 변한다 

 

클릭시 

 

 

참고 

dico.me/java-script/articles/242/ko

 

 

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="index.css">
    <script src="index.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="tab_wrap tab_area">
        <div class="btn_area clearfix">
          <button class="btn btn_tab act" data-depth="0" data-idx="0">First</button>
          <button class="btn btn_tab" data-depth="0" data-idx="1">Second</button>
          <button class="btn btn_tab" data-depth="0" data-idx="2">Third</button>
          <button class="btn btn_tab" data-depth="0" data-idx="3">Fourth</button>
        </div>
        
        <div class="content_area act" data-depth="0" data-idx="0">First tab content</div>
        <div class="content_area" data-depth="0" data-idx="1">
          <p>Second tab content</p>
          <div class="tab_area">
            <div class="btn_area clearfix">
              <button class="btn btn_tab act" data-depth="1" data-idx="0">First</button>
              <button class="btn btn_tab" data-depth="1" data-idx="1">Second</button>
              <button class="btn btn_tab" data-depth="1" data-idx="2">Third</button>
              <button class="btn btn_tab" data-depth="1" data-idx="3">Fourth</button>
            </div>
      
            <div class="content_area act" data-depth="1" data-idx="0">2Depth First tab content</div>
            <div class="content_area" data-depth="1" data-idx="1">2Depth Second tab content</div>
            <div class="content_area" data-depth="1" data-idx="2">2Depth Third tab content</div>
            <div class="content_area" data-depth="1" data-idx="3">2Depth Fourth tab content</div>
          </div>
        </div>
        <div class="content_area" data-depth="0" data-idx="2">
          <p>Third tab content</p>
          <div class="tab_area">
              <div class="btn_area clearfix">
                <button class="btn btn_tab act" data-depth="1" data-idx="0">First</button>
                <button class="btn btn_tab" data-depth="1" data-idx="1">Second</button>
                <button class="btn btn_tab" data-depth="1" data-idx="2">Third</button>
                <button class="btn btn_tab" data-depth="1" data-idx="3">Fourth</button>
              </div>
      
              <div class="content_area act" data-depth="1" data-idx="0">2Depth First tab content</div>
              <div class="content_area" data-depth="1" data-idx="1">2Depth Second tab content</div>
              <div class="content_area" data-depth="1" data-idx="2">2Depth Third tab content</div>
              <div class="content_area" data-depth="1" data-idx="3">2Depth Fourth tab content</div>
            </div>
          </div>
        <div class="content_area" data-depth="0" data-idx="3">Fourth tab content</div>
      </div>
      
      <!-- <div class="tab_wrap tab_area">
        <div class="btn_area clearfix">
          <button class="btn btn_tab act" data-depth="0" data-idx="0">First</button>
          <button class="btn btn_tab" data-depth="0" data-idx="1">Second</button>
          <button class="btn btn_tab" data-depth="0" data-idx="2">Third</button>
          <button class="btn btn_tab" data-depth="0" data-idx="3">Fourth</button>
        </div>
        
        <div class="content_area act" data-depth="0" data-idx="0">First tab content</div>
        <div class="content_area" data-depth="0" data-idx="1">Second tab content</div>
        <div class="content_area" data-depth="0" data-idx="2">Third tab content</div>
        <div class="content_area" data-depth="0" data-idx="3">Fourth tab content</div>
      </div> -->
      <script>
          function findParent(el, className){
    let check = el.parentNode.classList.contains(className);
    
    if(check === true){
       return el.parentNode;
    }else{
      return findParent(el.parentNode, className);
    }
  }
  
  function bindingTabEvent(wrap){
    let wrapEl = document.querySelectorAll(wrap);
    
    wrapEl.forEach(function(tabArea){
      let btn = tabArea.querySelectorAll('.btn_tab');
      
      btn.forEach(function(item){
        item.addEventListener('click', function(){
          let parent = findParent(this, 'tab_area');
          let idx = this.dataset['idx'];
          let depth = this.dataset['depth'];
          let btnArr = parent.querySelectorAll('.btn_tab[data-depth="'+ depth +'"]');
          let contentArr = parent.querySelectorAll('.content_area[data-depth="'+ depth +'"]');
          
          btnArr.forEach(function(btn){ btn.classList.remove('act'); });
          this.classList.add('act');
          contentArr.forEach(function(content){ content.classList.remove('act'); });
          parent.querySelector('.content_area[data-idx="'+ idx +'"][data-depth="'+ depth +'"]').classList.add('act');
        });
      });
    });
  }
  
  bindingTabEvent('.tab_wrap');
      </script>
</body>
</html>

 

css

body{background:#f4f4f4}
.btn{padding:0;background:transparent;border:0;outline:0}
.clearfix::after{display:block;content:'';clear:both}

.tab_wrap{width:800px;margin:50px auto}
.tab_wrap .btn_tab{float:left;width:120px;height:30px;background:#fff;border-radius:10px 10px 0 0;text-align:center;line-height:30px}
.tab_wrap .btn_tab.act{background:#9adce2;font-weight:bold}
.tab_wrap .content_area{display:none;width:100%;min-height:200px;padding:10px;background:#fff;border-radius:0 0 10px 10px;box-sizing:border-box}
.tab_wrap .content_area.act{display:block}
.tab_wrap *[data-depth="1"]{background:#f4f4f4}

.btn_area {
    display: flex;

}
.btn_area button {
    flex: 1;
}

 

 

script

 

function findParent(el, className){
    let check = el.parentNode.classList.contains(className);
    
    if(check === true){
       return el.parentNode;
    }else{
      return findParent(el.parentNode, className);
    }
  }
  
  function bindingTabEvent(wrap){
    let wrapEl = document.querySelectorAll(wrap);
    
    wrapEl.forEach(function(tabArea){
      let btn = tabArea.querySelectorAll('.btn_tab');
      
      btn.forEach(function(item){
        item.addEventListener('click', function(){
          let parent = findParent(this, 'tab_area');
          let idx = this.dataset['idx'];
          let depth = this.dataset['depth'];
          let btnArr = parent.querySelectorAll('.btn_tab[data-depth="'+ depth +'"]');
          let contentArr = parent.querySelectorAll('.content_area[data-depth="'+ depth +'"]');
          
          btnArr.forEach(function(btn){ btn.classList.remove('act'); });
          this.classList.add('act');
          contentArr.forEach(function(content){ content.classList.remove('act'); });
          parent.querySelector('.content_area[data-idx="'+ idx +'"][data-depth="'+ depth +'"]').classList.add('act');
        });
      });
    });
  }
  
  bindingTabEvent('.tab_wrap');

'Study > JS' 카테고리의 다른 글

자바스크립트 동적구현 메소드  (0) 2021.03.03
aos js 웹 애니메이션  (0) 2021.02.22
간단한 Tab메뉴  (2) 2021.02.17
제이쿼리 api모음  (0) 2021.02.16
[Javascript] 호이스팅  (0) 2021.02.16

관련글 더보기

티스토리툴바