[JQuery/css] 탭메뉴 만들기 (tab menu)

 

한화면에 탭 메뉴 완성영상

블로그 올릴려고 만들고, 처음으로 반디캠을 찍어봤는데 생각보다 간단히 잘되네요! 완성 파일은 밑에 올리도록 할게요!

탭 메뉴를 이용해서 다른 콘텐츠를 보여줄 수 있는 코드입니다. 제이커리를 이용해서 만들었어요.

 

HTML

<div class="allWrap">     
<div class="tabBox">
            <p class="tab-link current" data-tab="tab-1"><span><img src="아이콘 alt="icon"></span> Setting01</p>
            <p class="tab-link"  data-tab="tab-2"><span><img src="아이콘" alt="icon"></span> Setting02</p>
        </div>
<div  id="tab-1" class="tab-content current">contents01</div>
<div  id="tab-2" class="tab-content">contents02</div>
</div>

간단한게, 메뉴부분과 컨텐츠를 부분으로 나누었고, 활성화 됐을 때 클래스(current)를 붙여 놓았어요.

또한 메뉴의 data-tab과 컨텐츠의 id를 같게 해줬어요. 나중에 어떤 메뉴를 눌렀을때  어떤 컨텐츠를 보여줄 지 정할 수 있어요, 

 

CSS

        *{margin:0;padding:0}
        .allWrap{width: 800px;margin:0 auto;}
        .tabBox{margin:20px 0}
        .tab-link{width: 47%;display: inline-block;padding:10px;text-align: center;background-color:#929090;border-radius: 20px;color:#fff;cursor: pointer;
        }
        .tab-link.current{
            background-color: #de4c4c;
            font-weight: 600;
        }
        .tab-content{
            display: none;
        }
        .tab-content.current{
            display: block;
            width: 100%;
            height: 300px;
            background-color:#d5d8d7;
            font-size: 30px;
            text-align: center;
            line-height: 250px;
        }

CSS는 꾸미기를 위한 쓸데 없는 것들이 있어요. 비활성화 되있는것과 활성화 되어있는 것만 구분해서 적어주면 될 것 같아요. 

 

JAVASCRIPT

        $('.tab-link').click(function () {
        var tab_id = $(this).attr('data-tab');
 
        $('.tab-link').removeClass('current');
        $('.tab-content').removeClass('current');
 
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
 
    });

클릭했을때, 클릭된 요소의 data-tab 값을 담고 클래스 current를 붙이고, data-tab 값과 id값이 같은 것에 클래스 'current'를 붙여주도록 했어요. 나머지에는 클래스 current를 삭제합니다.

 

완성 파일

tab.html

0.00MB