제이쿼리(jQuery) 간단한 탭 메뉴 만들기

오늘은 간단하게 동작하는 탭메뉴를 만들어 보려고 합니다.

홈페이지에서 많이 쓰이는 탭메뉴인데 제이쿼리를 이용해서 간단히 만들어 보겠습니다.

 

먼저 HTML을 작성해 줍니다.

<ul class="tabs">
  <li class="on"><a href="#">탭1</a></li>
  <li><a href="#" >탭2</a></li>
  <li><a href="#" >탭2</a></li>
</ul>
<div>
  <div class="tabcon">탭1 내용</div>
  <div class="tabcon">탭2 내용</div>
  <div class="tabcon">탭3 내용</div>
</div>

 

html만 입력했더니, 너무 볼품없어 보이니깐, css를 입혀줍니다.

.tabs{list-style:none;}
.tabs {display:flex;border:4px solid #dfdfdf;border-radius: 20px;padding:0 14px;}
.tabs li {position:relative;text-align: center;}
.tabs li + li::before {content:" ";position:absolute;left:0;top:50%;width:1px;height:16px;background-color:#c4c4c4;transform:translateY(-50%);}
.tabs a {display:block;padding:20px 15px;font-size:18px;color:#7c7c7c; text-decoration: none;}
.tabs .on a {position: relative; font-weight:700;color:#69b0a4;}
.tabs .on a::before{position: absolute;left:0;bottom:-4px; content:'';width:100%;height:4px;background:#69b0a4;}

.tabcon{display:none;}
.tabcon.on{display:block;}

여기서 tabcon은 해당 탭의 내용부분이므로 일단 다 가려주고, tabcon에 on클래스로 제어를 해주도록 코드를 작성합니다.

 

 

그 다음 js코드를 작성해 줍니다.

$(function(){
  var onTab = $(".tabs li.on").index()
  //현재 탭의 내용 표시
  $(".tabcon").eq(onTab).addClass("on");

  $(".tabs li").click(function(){
    var idx = $(this).index();
    //탭 클릭시 해당 on 클래스 적용
    $(".tabs li").removeClass("on");
    $(this).addClass("on");
   
    // 탭 내용 보여주기
    $(".tabcon").removeClass("on")
    $(".tabcon").eq(idx).addClass("on")
  });
});

index 함수를 이용하여 on클래스를 부여받은 탭의 내용을 보여줍니다.

 

반응형

See the Pen Untitled by 문정현 (@wqmlgxov-the-flexboxer) on CodePen.

그럼 위와 같은 결과를 얻으실 수 있습니다

 

 

오늘의 포스팅은 여기까지

끝까지 읽어주셔서 감사합니다.