<!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>
이미지의 온오프를 시키고 해당 버튼을 누를시만 display:block이 됨
'jquery' 카테고리의 다른 글
| 숫자만 입력받기 (0) | 2016.05.02 |
|---|---|
| 페이지 이동후 특정위치로 animate 이동 (0) | 2016.05.02 |
| 프린트 출력하기 (0) | 2016.05.02 |
| 동의하기 내용 펼쳐보기 (0) | 2016.05.02 |
| top버튼 누르면 상위로 슬라이딩 하기 (0) | 2016.05.02 |
WRITTEN BY