[jQuery] data-tab 활용 탭 메뉴(tabs menu)

data-tab 을 활용한 탭 메뉴(tabs menu) 구현

 

[html]

<div class="tab-menu">

  <ul>

    <li data-tab="menu1" class="on">

      <a href="#">menu1</a>

    </li>

    <li data-tab="menu2">

      <a href="#">menu2</a>

    </li>

    <li data-tab="menu3">

      <a href="#">menu3</a>

    </li>

  </ul>

  <!-- data-tab과 동일한 id -->

  <div class="content on" id="menu1">

    menu 1

  </div>

  <div class="content" id="menu2">

    menu 2

  </div>

  <div class="content" id="menu3">

    menu 3

  </div>

</div>

 

[css]

*{ margin: 0; padding: 0; }

ul{

  display: flex;

  gap: 20px;

  position: relative;

}

li{

  list-style: none;

}

li.on a{

  font-weight: bold;

  color: red;

}

.content{

  display: none;

  width: 300px; height: 300px;

  padding: 10px; margin-top: 10px;

  border: 1px solid black;

}

.content.on{

  display: block;

}

 

[js]

$('li').click(function(e){

  e.preventDefault();

  // 클릭된 li의 data-tab 변수 할당

  let current = $(this).attr('data-tab');

  // 모든 li와 div에서 클래스 on 제거

  $('li').removeClass('on');

  $('.content').removeClass('on');

  // 클릭된 li와 data-tab과 동일한 id를 가진 div에 클래스 on 추가

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

  $('#' + current).addClass('on');

});

 

See the Pen [jQuery] data-tab tabs menu 탭 메뉴 by j. sik (@jsik) on CodePen.