jQuery Div 좌우 이동 javascript2012/04/06 10:32
<div id="obj">
<div id="a">aaaaaaaa</div>
<div id="b" style="display:none;">bbbbbbbb</div>
<div id="c" style="display:none;">cccccccc</div>
<div id="d" style="display:none;">dddddddd</div>
</div>
<div id="prev">prev</div>
<div id="next">next</div>
$(document).ready(function() {
$("div").click(function() {
var objID = $(this).attr("id");
if( objID == 'prev') {
MoveDiv('prev');
}
else if( objID == 'next') {
MoveDiv('next');
}
});
});
var MoveDiv = function(str){
var nShow = 0;
$("#obj div").each(function(index) {
if( $(this).is("visible") ) {
nShow = index;
}
});
if( str == 'prev' ){
if( nShow-1 < 0 ) {
nShow = $("#obj div").length();
}
else {
nShow = nShow -1;
}
}
else {
if( nShow + 1 > 3 ) {
nShow = 0;
}
else {
nShow = nShow + 1;
}
}
$("#obj div").hide();
$("#obj div").eq(nShow).show();
}
demo : http://jsfiddle.net/underbar/wAAMj/15/
prev 또는 next 를 눌러서 div를 숨겼다 보였다 하는.. 단순한..
'javascript' 카테고리의 다른 글
| jQuery Div 좌우 이동 (0) | 2012/04/06 |
|---|---|
| 길이제한 초과한 글자 잘라내기. (0) | 2011/05/19 |
| 팝업창에서 새창띄우기 (0) | 2011/01/05 |
| 자바스크립트 슬라이드. (0) | 2010/08/31 |
| 한줄씩 내려가는(?) 글 (0) | 2010/07/16 |
| 체크박스가 한개일땐?? length가 undifined? (0) | 2010/06/29 |
| Date.getYear() , Date.getFullYear() (0) | 2010/05/07 |
| post방식으로 팝업창띄우기. (0) | 2009/12/24 |
| 자바스크립트 날짜 계산 (0) | 2009/10/06 |
| jQuery를 이용한 drag & resize (0) | 2009/04/15 |
| 슬라이드이미지와 설명글..? (0) | 2009/04/13 |
댓글을 달아 주세요