jQuery Tab

jQuery 탭

 

간단하고 쉽게 응용할수 있는 제이쿼리 탭.

 

-- css --------------------

ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px;
    border-bottom: 1px solid #eee;
    border-left: 1px solid #eee;
    width: 100%;
    font-family:"dotum";
    font-size:12px;
}
ul.tabs li {
    float: left;
    text-align:center;
    cursor: pointer;
    width:82px;
    height: 31px;
    line-height: 31px;
    border: 1px solid #eee;
    border-left: none;
    font-weight: bold;
    background: #fafafa;
    overflow: hidden;
    position: relative;
}
ul.tabs li.on{
    background: #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}
.tab_container {
    border: 1px solid #eee;
    border-top: none;
    clear: both;
    float: left;
    width: 248px;
    background: #FFFFFF;
}
.tab_content {
    padding: 5px;
    font-size: 12px;
    display: none;
}
.tab_container .tab_content ul {
    width:100%;
    margin:0px;
    padding:0px;
}
.tab_container .tab_content ul li {
    padding:5px;
    list-style:none
}
 #container {
    width: 249px;
    margin: 0 auto;
}

--// css --------------------

 

<div id="container">
    <ul class="tabs">
        <li class="on" rel="tab1">Tab 메뉴1</li>
        <li rel="tab2">Tab 메뉴2</li>
        <li rel="tab3">Tab 메뉴3</li>
    </ul>
    <div class="tab_container">
        <div id="tab1" class="tab_content">탭1. 내용</div>
        <div id="tab2" class="tab_content">탭2. 내용</div>
        <div id="tab3" class="tab_content">탭3. 내용</div>
    </div>
</div>

 

<script type="text/javascript">

$(function () {

    $(".tab_content").hide();
    $(".tab_content:first").show();

    $("ul.tabs li").click(function () {
        $("ul.tabs li").removeClass("on");
        $(this).addClass("on");
        $(".tab_content").hide()
        var activeTab = $(this).attr("rel");
        $("#" + activeTab).show()
    });
});

</script>

 

클릭했을때 li 에 class on 삭제하고 현재 li는 on을 추가한다.