tab menu (with jquery) #1 프로토타입

- 탭 메뉴 스타일 #1 프로토타입 (jquery)

 

input , ul>li*5, tabs

탭 누르면 content 변경, 검색창(나중에)

 

간단한 구조만 먼저 작성 

    <section>
        <!-- <input type="text" placeholder="What are you looking for?"> --> 
        <ul class="btn">
            <li data-alt="tab1" class="active">HTML5</li>
            <li data-alt="tab2">CSS3</li>
            <li data-alt="tab3">JQUERY</li>
            <li data-alt="tab4">JAVASCRIPT</li>
            <li data-alt="tab5">CSS FRAMEWORKS</li>
        </ul>
        <div class="tabs">
            <div id="tab1" class="active">tab1</div>   
            <div id="tab2">tab2</div>   
            <div id="tab3">tab3</div>   
            <div id="tab4">tab4</div>   
            <div id="tab5">tab5</div>   
        </div>
    </section>

body {
    margin: 0;
    line-height: 1.5em;
    background-color: #fff;
}
section {
    /* border: 1px solid red; */
    width: 800px;
}
.btn {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.btn li {
    float: left;
    border: 1px solid #000;
    background-color: gray;
}
.btn li.active {
    background-color: #fff;
}
.tabs {}
.tabs div {
    border: 1px solid #000;
    height: 200px;
    display: none;
}
.tabs div.active {
    display: block;
}

// 프로토타입
// li의 data-alt="tab1"과 tabs밑에있는 tab1을 연결해주기
$('.btn li').click(function() {
    // 액티브 클래스 넣기,
    $(this).addClass('active');   
    $(this).siblings().removeClass('active');   

    // data-alt속성 가져오기
    var tab = $(this).attr('data-alt');
    $('.tabs div').removeClass('active');
    $('#' + tab).addClass('active');
    // $('#' + tab).siblings().removeClass('active');
});