탭 구현하기 - html, css, jquery

 

버튼 클릭시 하단의 내용이 출력되는 탭을 만들어보겠습니다. 

디자인요소를 추가하기 위해 활성화된 버튼 부분은 하나의 div로 컨트롤 하여 클릭시 위치를 이동시켜 좀 더 세련(?)되게

디자인 해보았습니다. 

 

 

 

1. HTML 

    <div class="wrap">
        <div class="tab_wrap">
            <div class="tab_buttons">
                <button class="active">공지사항</button>
                <button>뉴스</button>
                <button>일대일문의</button>
                <div class="button_bg"></div> <!-- 활성화시 컨트롤 할 부분 -->
            </div>
            <div class="tab_contents">
                <div class="tab_content active">
                    공지사항입니다. <br>
                    공지사항입니다. <br>
                    공지사항입니다. <br>
                    공지사항입니다. <br>
                    공지사항입니다. 
                </div>
                <div class="tab_content">
                    News입니다. <br>
                    News입니다. <br>
                    News입니다. <br>
                    News입니다. <br>
                    News입니다. 
                </div>
                <div class="tab_content">
                    1:1 문의 입니다. <br>
                    1:1 문의 입니다. <br>
                    1:1 문의 입니다. <br>
                    1:1 문의 입니다. <br>
                    1:1 문의 입니다. 
                </div>
            </div>
        </div>
    </div>

 

2. CSS

* {
    padding:0;
    margin:0;
    box-sizing:border-box;
}

body{
    background-color:#eee;
}

.wrap {
    padding:30px;
}

.tab_buttons{
    position:relative;
    padding:12px 0;
    overflow:hidden;
}

.button_bg{
    position:absolute;
    top:50%;
    left:0;
    z-index:1;
    transform: translateY(-50%);
    display:inline-block;
    width:108px;
    height:45px;
    background: linear-gradient(#e66465, #9198e5);
    border-radius:45px;
}

.tab_buttons button {
    position:relative;
    z-index:2;
    float:left; 
    min-width:32px;
    height: 45px;
    padding:0 22px;
    border:0 none;
    background-color:transparent;
    font-size:16px;
    outline:none;
    cursor: pointer;
}

.tab_buttons button.active{
    color:#fff;
    font-weight:bold;
}

.tab_contents{
    position:relative;
}
.tab_content{
    position:absolute;
    top:0; 
    left:20px;
    z-index:1;
    padding:20px;
    transition: all 0.4s;
    opacity:0;
    color:#212121;
}

.tab_content.active{
    left:0;
    opacity:1;
}

 

🔹 button 에 클릭이벤트를 주기 위해서 button이 button_bg보다 z-index가 높아야 합니다.

🔹  tab_content 는 굳이 absolute를 하지 않아도 되지만, 오른쪽에서 왼쪽으로 페이드인 되는 효과를 주고 싶어서 absolute로 구현하였습니다. 

 

3. JQuery

$(document).ready(function(){
    $('.tab_buttons button').click(function(){
        var activeBtn = $('.button_bg');
        var _this = $(this);
        var width = $(_this).outerWidth();  // button_bg 에도 적용할 동일한 width값 필요
        var left = $(_this).position().left; // button_bg가 옮겨갈 위치 필요
        var thisIndex = $(_this).index();  // 클릭한 객체의 순서에 따라 컨텐츠를 활성화
        
        activeBtn.animate({
            width : width + 'px',
            left : left + 'px'
        }, 300, function(){
            $(_this).addClass('active').siblings().removeClass('active');
        });
        $('.tab_content').eq(thisIndex).addClass('active').siblings().removeClass('active');
        // button 순서와 동일한 tab_content 에 active를 주어 컨텐츠 활성화, 나머지는 active삭제
    })
});

 

다들 jquery 많이 쓰시나요? 

요즘은 주로 javascript를 쓰기때문에 jquery는 정말 오랫만이네요. 😅