제이쿼리 간단한 tab메뉴

HTML

 

 

<ul class="tab_wrap">

        <li class="on">
            <a href="#">첫번째메뉴</a>

            <div> 
첫번째 탭 내용
                       
            </div>
            </li>
        <li>
        <a href="#">두번째메뉴</a>

              <div>
  두번째 탭 내용
            </div>
            
        </li>
    </ul>

 

 

CSS

 

ul{list-style:none;}
a{text-decoration:none;}
.tab_wrap{width: 567px;    float:left;}   
.tab_wrap{position:relative; width: 567px;   float:left;}
.tab_wrap>li>a { display:block; position:absolute; width:78px;  text-align:center;  background:#ffffff;  color:#555; border:1px solid #dce3e9;  border-bottom:0; padding:7px 16px; font-weight:bold; margin-left: 40px;}
.tab_wrap>li.on>a {background:#efb300; color:#fff;   border:1px solid #efb300;}
.tab_wrap>li:first-child>a {left:0;}
.tab_wrap>li+li>a {left:110px;}
.tab_wrap>li>div {height:0; overflow:hidden; position:absolute;}
.tab_wrap>li.on>div { border:1px solid #dce3e9;  float:left; width: 566px; height:140px; margin-top:36px; border-top:#efb300 2px solid;}

 

 

JQUERY

 

  $( ".tab_wrap>li>a" ).click(function() {
                        $(this).parent().addClass("on").siblings().removeClass("on");
                        return false;
                    });