[javascript] 탭메뉴 구현하기

See the Pen tab menu by daeun lee (@daeuun) on CodePen.

 

 

 

 

html

<div class="container">

  <ul class="tabs">
    <li class="tab-link current" data-tab="tab-1">탭_1</li>
    <li class="tab-link" data-tab="tab-2">탭_1</li>
    <li class="tab-link" data-tab="tab-3">탭_2</li>
  </ul>

  <div id="tab-1" class="tab-content current">
      탭 내용 1번입니다.
  </div>
  <div id="tab-2" class="tab-content">
      탭 내용 2번입니다.
  </div>
  <div id="tab-3" class="tab-content">
      탭 내용 2번입니다.
  </div>

</div>

 

 

css

.container{
width:500px; 
margin: 0 auto;
}

ul.tabs{
margin: 0px; 
padding: 0px; 
list-style: none;
}
ul.tabs li{
display: inline-block; 
background: none; 
color: #222;  
padding: 10px 15px; 
cursor: pointer;
} 
ul.tabs li.current{
background: #ededed; 
color: #222;
}

.tab-content{
display: none; 
background: #ededed; 
padding: 15px;
}
.tab-content.current{
display: inherit;
}

 

탭메뉴 ul

ul.tabs{margin: 0px; padding: 0px; list-style: none;}

ul은 기본적으로 margin padding을 가지고 있기 때문에 0으로 설정함

 

ul.tabs li{display: inline-block;} 
.tab-content{display: none;}

li요소에 display: inline-block;을 넣어 가로로 정렬함

탭 내용 전체에 기본으로 display:none 속성을 주어서, current탭이 아닌 경우 보여지지 않게 한다

탭내용 content

display: inherit;

부모요소의 display설정을 그대로 따름

➡ current클래스가 부여된 탭만 보여지게 할 수 있다!

 

javascript

<script>
  $(document).ready(function(){

     $('ul.tabs li').click(function(){
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#"+tab_id).addClass('current');
    })

  })
</script>

 

li의 탭메뉴 속성

에 클릭이벤트가 발생하면

$('ul.tabs li').click(function(){

 

var tab_id = $(this).attr('data-tab');

.attr

: data-tab이 부여된 요소의 속성 값을 찾아서 선택함
$(this)

: 이벤트를 발생시킨 자기 자신을 선택시에 자기 자신만 선택을 하여 처리해준다.

 

.removeClass

일단 li와 content에 부여된 current클래스를 모두 지워주고

$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');

 

 

.addClass

이벤트 발생시킨 탭에 currnet를 다시 부여한다

$(this).addClass('current');

 

content 아이디에서 tab_id와 같은 속성( tab-1 | 2 | 3 )이 발생된 클래스에 currnet값을 부여한다

$("#"+tab_id).addClass('current');