jQuery이용하여 Tab Menu 만들기

Tab Menu Design1
Menu01 Menu02 Menu03
--Contents01--





--Contents02--





--Contents03--





Code 보기
<div id="BtnWrapper0" class="tabBtnWrap clearfix">
    <a href="#work1_1" class="active">Menu01</a>
    <a href="#work1_2">Menu02</a>
    <span class="disabled">Menu03</span>
</div>

<div id="ConWrapper0" class="tabConWrap">
    <div id="work1_1" class="con">
        --Contents01--
    </div>
    <div id="work1_2" class="con dp_no">
        --Contents02--
    </div>
    <div id="work1_3" class="con dp_no">
        --Contents03--
    </div>
</div>
/*공통*/
.dp_no{
    display:none;
}

/*Tab Menu Css*/
.tabBtnWrap{
    margin-bottom:-1px;
}

.tabBtnWrap a{
    display: block;
    float:left;
    padding:0 15px;     text-align: center;
    line-height:35px;
    background:#eee;
    border: 1px solid #ddd;
    transition:all 0.2s;
}

.tabBtnWrap a.active{
    background:#fff;
    border-bottom: 1px solid #fff;
}

.tabBtnWrap a:hover{
    background:#fff;
}

.tabBtnWrap span.disabled{
    background:#ddd;
    color:#fff;
    cursor:no-drop;
}

.tabConWrap{
    width: 100%;
}

.tabConWrap .con{
    display:none;
    padding: 15px;
    background: #fff;
    border: 1px solid #ddd;
}

.tabConWrap .con:nth-child(1){
    display:block;
}
function TabMenu(btn,conWrap){
    var $tl = $(btn);
    var $ta = $tl.find('a');
    var $co = $(conWrap).find('.con');

    $ta.on('click',function(event){
        event.preventDefault();

        if($(this).hasClass('active')){
            return;
        };

        $ta.removeClass('active');
        $(this).addClass('active');
        $co.css({'display':'none'});
        $($(this).attr('href')).css({'display':'block'});
    });
};

$(function(){
    TabMenu('#BtnWrapper0','#ConWrapper0');
});
Tab Menu Design2(반응형)
Menu01 Menu02 Menu03
Menu01
--Contents01--





Menu02
--Contents02--





Menu03
--Contents03--





Code 보기
<div id="BtnWrapper2" class="mobile_tabBtnWrap clearfix">
    <a href="#work2_1" class="active">Menu01</a>
    <a href="#work2_2">Menu02</a>
    <span class="disabled">Menu03</span>
</div>

<div id="ConWrapper2" class="tabConWrap2">
    <div class="ReactiveConWrap">
        <div id="" class="mobile_tabBtnWrap mobile clearfix">
            <a href="#work2_1" class="active">Menu01</a>
        </div>
        <div id="work2_1" class="con">
            --Contents01--
        </div>
    </div>
    <div class="ReactiveConWrap">
        <div id="" class="mobile_tabBtnWrap mobile clearfix">
            <a href="#work2_2">Menu02</a>
        </div>
        <div id="work2_2" class="con">
            --Contents02--
        </div>
    </div>
    <div class="ReactiveConWrap">
        <div id="" class="mobile_tabBtnWrap mobile clearfix">
            <span class="disabled">Menu03</span>
        </div>
        <div id="work2_3" class="con">
            --Contents03--
        </div>
    </div>
</div>
/*공통*/
.dp_no{
    display:none;
}

/*Tab Menu Css*/
.mobile_tabBtnWrap{
    margin-bottom:-1px;
}

    
.mobile_tabBtnWrap.mobile{
    display:none;
}

.mobile_tabBtnWrap a,
.mobile_tabBtnWrap span{
    display: block;
    float:left;
    width:33.333%;
    padding:0 10px;

    text-align: center;
    line-height:35px;

    background:#eee;
    border: 1px solid #ddd;

    transition:all 0.2s;
}

.mobile_tabBtnWrap a.active{
    background:#fff;
    border-bottom: 1px solid #fff;
}

.mobile_tabBtnWrap a:hover{
    background:#fff;
}

.mobile_tabBtnWrap span.disabled{
    background:#ddd;
    color:#fff;
    cursor:no-drop;
}

.tabConWrap2{
    width: 100%;
}

.tabConWrap2 .ReactiveConWrap .con{
    padding: 15px;
    display:none;
    background: #fff;
    border: 1px solid #ddd;
}

.tabConWrap2 .ReactiveConWrap:nth-child(1) .con{
    display:block;
}

@media (max-width:639px){
    .mobile_tabBtnWrap{
        display:none;
        margin-bottom:0;
    }

    .mobile_tabBtnWrap.mobile{
        display:block;
    }

    .mobile_tabBtnWrap.mobile a,
    .mobile_tabBtnWrap.mobile span{
        width:100%;
    }
}
function TabMenu(btn,conWrap){
    var $tl = $(btn);
    var $ta = $tl.find('a');
    var $co = $(conWrap).find('.con');

    $ta.on('click',function(event){
        event.preventDefault();

        if($(this).hasClass('active')){
            return;
        };

        $ta.removeClass('active');
        $(this).addClass('active');
        $co.css({'display':'none'});
        $($(this).attr('href')).css({'display':'block'});
    });
};

$(function(){
    TabMenu('.mobile_tabBtnWrap','#ConWrapper0');
});
Tab Menu Design3(반응형)
--Contents01--





--Contents02--





--Contents03--





Code 보기
<div class="wrapperExample mb10">
    <div class="tabBtnAllWrap">
    <div id="BtnWrapper4" class="tabBtn_3_Wrap clearfix">
        <a href="#work3_1" class="active">Menu01</a>
        <span>|</span>
        <a href="#work3_2">Menu000002</a>
        <span>|</span>
        <a href="#work3_3">Menu003</a>
    </div>
    <span class="activeBar"></span>
    </div>

    <div id="ConWrapper4" class="tabCon_3_Wrap">
    <div id="work3_1" class="con">
        --Contents01--
    </div>
    <div id="work3_2" class="con">
        --Contents02--
    </div>
    <div id="work3_3" class="con">
        --Contents03--
    </div>
    </div>
</div>
.tabBtnAllWrap{
    position: relative;
}

.tabBtn_3_Wrap{
    padding:5px 0;
    border-bottom:3px solid #999;
}

.tabBtn_3_Wrap a{
    display: block;
    float:left;
    margin-right:10px;
    margin-left:10px;
}

.tabBtn_3_Wrap span{
    display: block;
    float:left;
    color:#cfcfcf;
}

.activeBar{
    display:block;
    position:absolute;
    width:79px;
    height:3px;
    bottom:0;
    background:red;
    z-index:999;
}

.tabBtn_3_Wrap a:nth-child(1){
    margin-left:10px;
}

.tabBtn_3_Wrap a:last-child{
    margin-right:0;
}

.tabCon_3_Wrap .con{
    display:none;
    border-bottom:1px solid #999;
}

.tabCon_3_Wrap .con:nth-child(1){
    display:block;
}
function TabMenu(btn,conWrap){
    var $tl = $(btn);
    var $ta = $tl.find('a');
    var $co = $(conWrap).find('.con');

    $ta.on('click',function(event){
        event.preventDefault();
        
        if($(this).hasClass('active')){
            return;
        };

        $ta.removeClass('active');
        $(this).addClass('active');
        $co.css({'display':'none'});
        $($(this).attr('href')).css({'display':'block'});

    //버튼 엑티브시 엑티브바 이동 및 길이 동작
    var thisBtnWidth = $(this).outerWidth()+20;
    var thisTabpositionL = $('.tabBtn_3_Wrap').offset().left;
    var thisBtnPositionL = $(this).offset().left;
    var thisBtnPositionL = thisBtnPositionL-thisTabpositionL-10;

    $('.activeBar').animate({
        'left':thisBtnPositionL,
        'width':thisBtnWidth
    },200,'linear');
    });
};

$(function(){
    TabMenu('#BtnWrapper4','#ConWrapper4');
});

+ Recent posts

티스토리툴바