[Jquery][HTML][CSS]간단한 탭메뉴(Tab menu Source) 소스

<style type="text/css"> * { margin:0; padding:0; } ul,li { list-style:none; } a { text-decoration:none; color:#000; } .tab { border:1px solid #ddd; border-left:none; background:#fff; overflow:hidden; } .tab li { float:left; width:33.3%; border-left:1px solid #ddd; text-align:center; box-sizing:border-box; } .tab li { display:inline-block; padding:20px; cursor:pointer; } .tab li.on { background-color:#eee; color:#f00; } .tab_con { clear:both; margin-top:5px; border:1px solid #ddd; } .tab_con div { display:none; height:100px; background:#fff; line-height:100px; text-align:center; } </style> <script type="text/javascript"> $(function () { tab('#tab',0); }); function tab(e, num){     var num = num || 0;     var menu = $(e).children();     var con = $(e+'_con').children();     var select = $(menu).eq(num);     var i = num;     select.addClass('on');     con.eq(num).show();     menu.click(function(){         if(select!==null){             select.removeClass("on");             con.eq(i).hide();         }         select = $(this);         i = $(this).index();         select.addClass('on');         con.eq(i).show();     }); } </script> <ul class="tab" id="tab">     <li>A</li>     <li>B</li>     <li>C</li> </ul> <div class="tab_con" id="tab_con">     <div>1st Contents</div>     <div>2nd Contents</div>     <div>3rd Contents</div> </div>

※ jquery import 필요