- 클릭하면 텝메뉴가 달라짐은 .on클래스가 추가되고 style에 .on을 정의해놔서임...
<style>
#wrap {width:939px; margin-left:400px;}
#wrap ul {margin-top:140px;}
#wrap ul:after {content:""; display:block; clear:both;}
#wrap ul li {float:left; overflow:hidden; height:25px; margin-right:6px; }
#wrap ul li:last-child { margin-right:0px; }
#wrap ul li img {margin-top:0x}
#wrap ul li .on img {margin-top:-10px}
#content {position:relative; width:487px; height:323px;}
#content div {position:absolute; left:0px; top:0px; display:none; width:455px; height:291px; margin-top:10px; background:#55aaea; padding:16px;}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
var tab = $('#wrap #tab > li');
var content = $('#content > div');
tab.on('click', function(e){
e.preventDefault();
var tg = $(this);
var tc = tg.find('> a'); // #wrap ul li .on img {margin-top:-25px}
tab.find('> a').removeClass('on');
tc.addClass('on');
i = tg.index();
content.css('display', 'none');
content.eq(i).css('display', 'block');
});
});
</script>
</head>
<body>
<div id="wrap">
<!-- tabmenu -->
<ul id="tab">
<li>
<a href="#gallery"><img src="img/tab01.png" alt="Gallery" />
</a>
</li>
<li><a href="#cafe"><img src="img/tab02.png" alt="Cafe" /></a></li>
<li><a href="#lounge"><img src="img/tab03.png" alt="Lounge" /></a></li>
<li><a href="#service"><img src="img/tab04.png" alt="Service" /></a></li>
</ul>
<!-- //tabmenu -->
<!-- tab content -->
<div id="content">
<div style="display:block;">
<img src='img/img01.png' alt="img1" />
</div>
<div>
<img src='img/img02.png' alt="img2" />
</div>
<div>
<img src='img/img03.png' alt="img3" />
</div>
<div>
<img src='img/img04.png' alt="img4" />
</div>
</div>
<!-- //tab content -->
</div>
</body>
