[Hweb] Tab menu 기본

See the Pen Untitled by inyoung2200 (@inyoung2200) on CodePen.

 

1. HTML

<div class="com_tabmenu">
  <ul class="tab_list">
    <li class="tab_anc on"><a>AWS</a></li>
    <li class="tab_anc"><a>AZURE</a></li>
    <li class="tab_anc"><a>GCP</a></li>
  </ul>
</div>
<ul class="tab_cont">
  <li class="tab_cont1 on"></li>
  <li class="tab_cont2">tab02</li>
  <li class="tab_cont3">tab03</li>
</ul>

탭컨텐츠의 클래스 명을 통일해도 상관없다. 하지만 탭 컨텐츠마다 display가 다를수 있기 때문에 css를 더 자유롭게 쓰기 위해서 분리시켰다.

2. CSS

.tab_cont1 {
    display: none;
}

.tab_cont2 {
    display: none;
}

.tab_cont3 {
    display: none;
}

.tab_cont1.on {
    display: grid;
}

.tab_cont2.on {
    display: block;
}

.tab_cont3.on {
    display: block;
}

3. script

$(function () {
    $(document).on("click", '.tab_list .tab_anc', function (e) {
        e.preventDefault();
        var index = $(this).index();
        $('.tab_cont li').eq(index).addClass("on").siblings().removeClass('on');
        $(this).addClass('on').siblings().removeClass('on');
    });
})

*'.tab_cont li' 말고 '.tab_cont div'를 쓰면 안먹혀서 li로 html을 작성하였다.