Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 증가값
- is_check
- 파일질라설치오류
- Math.floor()
- toFixed()
- hide
- 소스트리인증실패
- FileZilla다운로드
- slideUp
- index %
- 파일질라다운로드
- 1521
- Excel
- ctrl+/
- excel중복체크
- 파일질라설치
- SUB함수
- 주석이 먹히지 않을 때
- selectedIndex
- Math.round()
- selectoptions
- addClass
- removeClass
- Parent
- Git
- calc.minus
- FileZilla설치
- push오류
- Math.ceil()
- calc.plus
Archives
- Today
- Total
잡동사니에도 사랑을
[21.10.18] exam02(06_jQueryDOM) - 이미지 목록 클릭 시 클릭한 이미지 띄우기 본문
JAVA_EE/JQuery
[21.10.18] exam02(06_jQueryDOM) - 이미지 목록 클릭 시 클릭한 이미지 띄우기
luvforjunk 2021. 10. 18. 10:58728x90
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
width: 480px;
height: 300px;
padding-top: 20px;
background-size: 100% 100%;
}
ul {
padding: 10px 20px;
background-color: rgba(255, 255, 255, 0.6);
/* 0.6은 투명도를 나타냄 */
}
</style>
</head>
<body>
<div>
<ul id="menu">
<li class="item"><a href="#">../img/img1.PNG</a></li>
<li class="item"><a href="#">../img/img2.PNG</a></li>
<li class="item"><a href="#">../img/img3.PNG</a></li>
</ul>
</div>
<script type="text/javascript"
src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function() {
$('.item > a').click(
function() {
var index = $(this).parent().index();
console.log('index = ' + index);
var image = [ '../img/img1.PNG', '../img/img2.PNG',
'../img/img3.PNG' ];
$(this).parents('div').css({
'backgroung-image' : 'url(' + image[index] + ')'
});
return false;
});
});
</script>
</body>
</html>
[결과]
728x90
반응형
'JAVA_EE > JQuery' 카테고리의 다른 글
[JQuery] 선택된 항목만 내용 표시 (0) | 2021.10.18 |
---|---|
[JQuery] 마우스 올려 서브 메뉴 펼치기 & 모든 서브 메뉴 숨기기 (0) | 2021.10.18 |
[21.10.18] exam01(06_jQueryDOM) - 문서 객체 모델(DOM, Document Object Model) 예제문 (0) | 2021.10.18 |
[21.10.15] exam05(05_jQueryAnimation) (0) | 2021.10.15 |
[21.10.15] exam04(05_jQueryAnimation) (0) | 2021.10.15 |