[jQuery / tab menu] 제이쿼리로 탭메뉴 만들기 1

하나의 탭 메뉴와 그에 딸린 콘텐츠가 한 div로 묶여 있는 구조 

 

HTML

 

<div class="board-cont cf">
        <div class="board-list">
            <span class="board-tit on">MENU1<a href="#" class="btn-more"><i class="xi-plus"></i></a></span>
            <ul>
                <li>sub-menu</li>
                <li>sub-menu</li>
                <li>sub-menu</li>
            </ul>
        </div>
        <div class="board-list">
            <span class="board-tit">MENU2<a href="#" class="btn-more"><i class="xi-plus"></i></a></span>    
            <ul>
                <li>sub-menu</li>
                <li>sub-menu</li>
                <li>sub-menu</li>
            </ul>
        </div>
    </div>

---

CSS

 

.board-cont{position: relative;width: 100%;}
.board-list .board-tit{display: block;height: 28px;margin-bottom: 15px;color: #c8c8c8;font-weight: 400;cursor: pointer;}
.board-list .board-tit.on{color: #383846;font-weight: 500;}
.board-list .board-tit .btn-more{float: right;}
.board-list + .board-list .board-tit{padding-left: 20px;}
.board-list{float: left;width: 50%;height: 103px;}
.board-cont .board-list ul{position: absolute;width: 100%;top: 43px;left: 0;margin-top: 0;}
.board-list ul{display: none;}
.board-list:first-child ul{display: block;}

---

jQuery

 

$('.board-tit').off().on('click',function(e){
         $(this).addClass('on').next('ul').stop().fadeIn();
         $('.board-tit').not(this).removeClass('on').next('ul').stop().fadeOut();
});