[HTML] data-tab을 이용하여 Tab 기능 만들기

data-tab태그 와 cnt의 id값을 공통으로 하여 연결시켜준다.

 

HTML

<div class="container">
  <ul class="tab_tit">
    <li class="on" data-tab="tab1">01월31일</li>
    <li data-tab="tab2">02월01일</li>
    <li data-tab="tab3">02월02일</li>
  </ul>
  <div id="tab1" class="cnt on">
    <h2>오늘의 할일</h2>
    <ul>
      <li>비타민 챙겨먹기</li>
      <li>선풍기씻기</li>
      <li>냉장고청소</li>
    </ul>
  </div>
  <div id="tab2" class="cnt">
    <h2>오늘의 할일</h2>
    <ul>
      <li>홍삼먹기</li>
      <li>연차</li>
    </ul>
  </div>
  <div id="tab3" class="cnt">
    <h2>오늘의 할일</h2>
    <ul>
      <li>청소하기</li>
      <li>화분물주기</li>
    </ul>
  </div>  
</div>

 

CSS

.container{margin:0 auto; width:80%;}
.tab_tit{padding-top:20px; border-bottom:1px solid #777;}
.tab_tit::after{content:''; display:block; clear:both;}
.tab_tit li{float: left;width: 150px;height: 32px;text-align: center;line-height: 32px; cursor:pointer}
.tab_tit li::after{content:''; display:none; clear:both; width:100%; height:3px; background:#48474e;}
.tab_tit li.on::after{display:block;}

.cnt{display:none; padding:40px 10px;}
.cnt.on{display:block; padding:40px 10px;}
.cnt h2{font-size:20px; font-weight:800;}
.cnt ul{padding:20px 0px;}
.cnt ul li{line-height:22px;}
.cnt ul li::before{content: '';display: inline-block;margin-top: 9px;margin-right: 9px;width: 5px;height: 5px;background: #2f4394;border-radius: 50%;vertical-align: top;}

 

JS

$(function() {
  $('ul.tab_tit li').click(function() {
    var onTab = $(this).attr('data-tab');
    $('ul.tab_tit li').removeClass('on');
    $('.cnt').removeClass('on');
    $(this).addClass('on');
    $('#' + onTab).addClass('on');
  })
});

 

참고 사이트

https://codepen.io/seozzz/pen/oNgreRm