<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js " language="javascript" type="text/javascript" charset="utf-8"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#next").on("click", function() {
$(".container > div:visible").each(function(index) {
if(index == 0) {
$(".container > div:hidden").first().css("display", "block").addClass("add").clone().insertBefore(this);
$(this).first().css("display", "none").appendTo(".container");
$(".container > .add").eq(0).remove();
}
});
});
$("#prev").on("click", function() {
$(".container > div:visible").each(function(index){
if(index == 0) {
$(".container > div:hidden").last().css("display", "block").clone().insertBefore(this);
$(".container > div").last().remove();
$(".container > div:visible").last().css("display", "none");
}
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
<div class="goodrun">GoodLight</div>
<div class="goodshow1" style="display: none;">goodshow1</div>
<div class="goodshow2" style="display: none;">goodshow2</div>
<div class="goodshow3" style="display: none;">goodshow3</div>
<div class="goodshow4" style="display: none;">goodshow4</div>
<div class="goodshow5" style="display: none;">goodshow5</div>
</div>
<br/><br/><br/><br/>
<input type="button" value="prev" id="prev"/>
<input type="button" value="next" id="next"/>
</body>
</html>
'Web > JQuery' 카테고리의 다른 글
| jQuery closest(), parents() 메소드의 차이 (0) | 2017.02.09 |
|---|---|
| event.stopPropagation(), event.preventDefault () 이해하기 (0) | 2017.02.01 |
| 제이쿼리 이런식으로도 사용 가능하다. 참고 (0) | 2016.06.17 |
| Jquery Selector ( 자주 쓰는 ) (0) | 2016.03.03 |
| Jquey append 종류 (0) | 2016.01.28 |