팬더다이녀석들아
296
2021-02-05 17:17:08
0
77

선배님들 탭메뉴하고 아코디언메뉴에 대해서 질문좀 드리겠습니다



<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
    body, div, ul, li, dl, dd, dt, ol, h1, h2, h3, h4, h5, h6, input, fieldset, legend, p, select, table, th, td, tr, textarea, button, form, figcaption, img, a {margin:0; padding:0; text-decoration: none; list-style: none;}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;700;900&display=swap');
    
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
    
    .b_closet_part1 {width: 100%; height: 280px; text-align: center; border-bottom: 1px solid black;}
    .closet_part_sub1 {font-family: 'GmarketSansBold'; font-size: 40px; padding-top: 100px;}
    .closet_part_sub2 {font-family: 'Noto Sans KR', sans-serif; font-size: 18px; font-weight: 300; padding-top: 10px;}
    
    .btn{padding:0;background:transparent;border:0;outline:0}
.clearfix::after{display:block;content:'';clear:both}

.tab_wrap{width:1500px; height:205px; margin: 0 auto;}
.tab_wrap .btn_tab{float:left;width:250px;height:205px;background:#eeeeee;text-align:center;line-height:30px; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 20px; border-left: 1px solid black;}
    .btn_tab:last-child{border-right: 1px solid black;}
.tab_wrap .btn_tab.act{background:#dcdcdc;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}
    
.accordion { overflow: hidden; width: 2560px; height: 580px; border: 1px solid #333; background-color: #000; margin: 0 -530px;}
.accordion a, .accordion div { float: left;}
.accordion a {  width: 130px; height: 580px; background: #000; color: #fff; border-left: 1px solid #666; border-right: 1px solid #666;}
.accordion a:first-child {margin-left: 529px;}
.accordion a.current { background: #000; color: #fff; }
.accordion .acdCon { display: none; width: 972px; height: 580px;}
.accordion .acdCon div { width: 972px; }
    
    .acdCon1 {background-image: url('http://behom.cafe24.com//bizdemo39562/img/new1.jpg'); width: 972px; height: 580px; color: #fff;}
    .acdCon2 {background-image: url('http://behom.cafe24.com//bizdemo39562/img/new2.jpg'); width: 972px; height: 580px; color: #fff;}
    .acdCon3 {background-image: url('http://behom.cafe24.com//bizdemo39562/img/new3.jpg'); width: 972px; height: 580px; color: #fff;}
    .acdCon4 {background-image: url('http://behom.cafe24.com//bizdemo39562/img/new4.jpg'); width: 972px; height: 580px; color: #fff;}
    
    .acd_textbox {transform: rotate(90deg); width: 200px; padding-top: 100%; padding-left: 50%;}
    .acd_text1 {font-family: 'GmarketSansLight'; font-size: 20px;}
    .acd_text2 {font-family: 'Noto Sans KR', sans-serif; font-size: 15px;}
    
    .acdCon1_sub1 {padding: 200px 30px 0 50px; font-family: 'GmarketSansMedium'; font-size: 40px;}
    .acdCon1_sub2 {padding: 10px 30px 0 50px; font-family: 'Noto Sans KR', sans-serif; font-size: 17px;}
</style>

<div><img src="http://widat.cafe24.com//behom/boot/boot1.jpg" width="100%"></div>
<div class="b_closet_part1">
    <div class="closet_part_sub1">CLOSET</div>
    <div class="closet_part_sub2">붙박이장</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">슬라이드</button>
    <button class="btn btn_tab" data-depth="0" data-idx="1">여닫이</button>
    <button class="btn btn_tab" data-depth="0" data-idx="2">드레스룸</button>
    <button class="btn btn_tab" data-depth="0" data-idx="3">엔드리스</button>
    <button class="btn btn_tab" data-depth="0" data-idx="4">신발장</button>
    <button class="btn btn_tab" data-depth="0" data-idx="5">거실장</button>
  </div>
  
    <div class="accordion">
        <a>
            <div class="acd_textbox">
                <div class="acd_text1">SLIDING SYSTEM</div><br>
                <div class="acd_text2">슬라이딩</div>
            </div>
        </a>
		<div class="acdCon">
			<div class="acdCon1">
               <div class="acdCon1_sub1">SLIDING SYSTEM</div>
               <div class="acdCon1_sub2">공간 활용도가 높은 슬라이드 도어</div>
            </div>
		</div>
		<a>
            <div class="acd_textbox">
                <div class="acd_text1">SWING SYSTEM</div><br>
                <div class="acd_text2">여닫이</div>
            </div>
        </a>
		<div class="acdCon">
			<div class="acdCon2">
               <div class="acdCon1_sub1">SWING SYSTEM</div>
               <div class="acdCon1_sub2">모두에게 사랑받는 여닫이 도어</div>
            </div>
		</div>
		<a>
		    <div class="acd_textbox">
                <div class="acd_text1">DRESS ROOM</div><br>
                <div class="acd_text2">드레스룸 / 엔드리스</div>
            </div>
		</a>
		<div class="acdCon">
			<div class="acdCon3">
			    <div class="acdCon1_sub1">DRESS ROOM</div>
                <div class="acdCon1_sub2">공간 활용도가 높은 드레스룸 시스템</div>
			</div>
		</div>
		<a>
            <div class="acd_textbox">
                <div class="acd_text1">LIVING SYSTEM</div><br>
                <div class="acd_text2">신발장 / 거실장</div>
            </div>
        </a>
		<div class="acdCon">
			<div class="acdCon4">
			    <div class="acdCon1_sub1">LIVING SYSTEM</div>
                <div class="acdCon1_sub2">실내공간 인테리어의 중요성<br>리빙 시스템</div>
			</div>
		</div>
    </div>
 
  <div class="content_area act" data-depth="0" data-idx="0">
      <div class="tab_area">
          <div class="btn_area clearfix">
              <button class="btn btn_tab act" data-depth="1" data-idx="0">First</button>
          </div>
          
          <div class="content_area act" data-depth="1" data-idx="0">2Depth First tab content</div>
      </div>
  </div>
  
  <div class="content_area" data-depth="0" data-idx="1">
    <div class="tab_area">
      <div class="btn_area clearfix">
        <button class="btn btn_tab act" data-depth="1" data-idx="0">First</button>
      </div>

      <div class="content_area act" data-depth="1" data-idx="0">2Depth First tab content</div>

    </div>
  </div>
  
  <div class="content_area" data-depth="0" data-idx="2">
    <div class="tab_area">
        <div class="btn_area clearfix">
          <button class="btn btn_tab act" data-depth="1" data-idx="0">드레스룸</button>
          <button class="btn btn_tab" data-depth="1" data-idx="1">엔드리스</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>
    </div>
    
  <div class="content_area" data-depth="0" data-idx="3">
    <div class="tab_area">
        <div class="btn_area clearfix">
            <button class="btn btn_tab" data-depth="1" data-idx="0">드레스룸</button>
            <button class="btn btn_tab act" data-depth="1" data-idx="1">엔드리스</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>
  </div>
  
  <div class="content_area" data-depth="0" data-idx="4">
    <div class="tab_area">
        <div class="btn_area clearfix">
            <button class="btn btn_tab act" data-depth="1" data-idx="0">신발장</button>
            <button class="btn btn_tab" data-depth="1" data-idx="1">거실장</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>
  </div>
  
  <div class="content_area" data-depth="0" data-idx="5">
    <div class="tab_area">
        <div class="btn_area clearfix">
            <button class="btn btn_tab" data-depth="1" data-idx="0">신발장</button>
            <button class="btn btn_tab act" data-depth="1" data-idx="1">거실장</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>
  </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>


<script type="text/javascript">
    $(document).ready(function() {
    var $tgWrap = $('.accordion'),
        $tgAnchor = $tgWrap.find('a'),
        $tgCon =  $tgWrap.find('.acdCon'),
        curntClass = 'current',
        tgConW = $tgCon.width(),
        tgConSet = $tgCon.css('width', '0');
    var cuntFun = function(tg) {
        $tgAnchor.removeClass(curntClass).filter(tg).addClass(curntClass);
        $tgCon.removeClass(curntClass).filter(tg.next($tgCon)).addClass(curntClass);
    };
    $tgAnchor.eq(0).addClass(curntClass);
    $tgCon.eq(0).show().css('width', tgConW);
    $tgAnchor.click(function() {
        var $nextTgCon = $(this).next($tgCon);
        cuntFun($(this));
        console.log(tgConW);
        $nextTgCon.show().animate({
            width: tgConW
        }, 300);
        $tgCon.not($nextTgCon).animate({
            width: 0
        }, 300, function() {
            $(this).hide();
        });
    });
});
</script>



우선 코드가 길고 지저분해서 죄송합니다

코드펜으로 옮겨올려했는데 뭔가 오류가 나서 안되가지구요 ㅜㅜ



제가 하고싶은건 


슬라이드 탭을 눌렀을때 아코디언 메뉴에 있는 슬라이드 탭도 활성화되고


여닫이 탭을 눌렀을때 아코디언 메뉴에 있는 여닫이 탭도 활성화되는 그런 형태의 코드를 짜고싶은데


스크립트를 어떻게 짜야할지를 모르겠습니다 도움좀 주세요 ㅜㅜ


0
  • 답변 0

  • 로그인을 하시면 답변을 등록할 수 있습니다.