JAVA_EE/JQuery

[21.10.18] exam02(06_jQueryDOM) - 이미지 목록 클릭 시 클릭한 이미지 띄우기

luvforjunk 2021. 10. 18. 10:58
728x90
반응형
<!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
반응형