<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
img{width:100px;height:50px}
ul.tab{height:200px;}
ul.tab li{float:left;}
div{display:none}
</style>
<script type="text/javascript">
$(function(){
var tabs = $("ul.tab li img");
tabs.live("click focusin",function(){
$("div").css("display","none");
var className = $(this).attr("class");
$("div." + className).css("display","block");
for(var i=0; i<$("ul.tab li img").length; i++){
$("ul.tab li img").eq(i).attr('src', $("ul.tab li img").eq(i).attr('src').replace('_on.gif','_off.gif'));
$(this).attr('src', $(this).attr('src').replace('_off.gif','_on.gif'));
};
});
$(tabs[0]).click();
});
</script>
</head>
<body>
<ul class="tab">
<li><a href="#"><img src="1_off.gif" alt="" class="A" /></a></li>
<li><a href="#"><img src="2_off.gif" alt="" class="B" /></a></li>
<li><a href="#"><img src="3_off.gif" alt="" class="C" /></a></li>
</ul>
<div class="A">
div1
</div>
<div class="B">
div2
</div>
<div class="C">
div3
</div>
</body>
</html>
'PROGRAM > JQUERY' 카테고리의 다른 글
| jQuery 흘러가는 배너 모음 (0) | 2013.01.07 |
|---|---|
| 제이쿼리 작성기초 (0) | 2013.01.02 |
| 구글 서버의 jQuery 사용하기 (0) | 2013.01.02 |
| 라디오버튼, 체크박스 버튼 꾸미기 (0) | 2012.06.20 |
| 아래로 내려오는 2단메뉴 (0) | 2012.05.21 |