웹디자인기능사 실기 / 탭메뉴 css&js

<css>

 

#contents .notice_gal h3{position: absolute; left: 0; top: 0;
width: 100px; height: 30px; padding: 5px 10px; background: #ccc;
color: #fff;  text-align: center; cursor: pointer;}
#contents .notice_gal h3.r100{left: 120px;}
#contents .notice_gal h3.on{background: peru;}
#contents .notice_gal ul{position: absolute; left: 0; top: 40px; display: none;}
#contents .notice_gal ul.on{display: block;}

.gal li a{display: block; width: 100%; height: 100%;}

<js>

$('.notice_gal h3').click(function(){
        $('.notice_gal h3,.notice_gal ul').removeClass('on');
        $(this).addClass('on');
        $(this).next('ul').addClass('on');
    });