[jQuery] 7.실습:pentabreed

in Web on jQuery


pentabreed




/*---------- pentabreed.css ------------*/

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
li{
	list-style:none;
}
.wrap1{
	width:50%;
	margin:auto;
}
.main1{
	border:1px solid orange;
	height:400px;
}
.main1 img{
	width:100%;
	height:100%;
}
.menu1 ul{
	display:flex;
	height:120px;
}
.menu1 li{
	flex:1;
	
}
.menu1 a{
	display:block;
	border:1px solid orange;
	height:100%;
}
.menu1 li img{
	width:100%;
	height:100%;
}
.wrap2{
	width:50%;
	margin:auto;
	display:flex;
}
.main2{
	width:70%;
	height:300px;
	border:1px solid orange;	
	border-right:none;
}

.main2 img{
	width:100%;
	height:100%;
}
.menu2{
	width:30%;
}
.menu2 ul{
	border:1px solid orange;	
	height:100%;
}
.menu2 li{
	border:1px solid orange;
	height:25%;
	background: #fff;
	
}
.menu2 li a{
	display:block;
	color:#000;
	height:100%;
	padding:25px 0;
	text-decoration:none;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.menu2 li a:hover{
	background: orange;
	color:#fff;
}
.on{
	border:5px solid skyblue !important;
}
.on2{ 
	background: orange;
	color:#fff !important;
}





/*---------- pentabreed.js ------------*/

$(function(){
	$('.menu1 li a').click(function(e){ //클릭하면
		e.preventDefault() //a를 링크로 이동안함
		var href
		href=this.getAttribute('href') //.menu1 li a의 href 속성을 가져옴
		$('.main1 img').attr({'src':href}) //.main1 img의 src 속성을 href로 바꿈
		$('.menu1 li a').removeClass('on') //클래스 제거
		$(this).addClass('on')  // 클래스를 on으로 지정(addClass는 무조건 class 가오므로 .on으로 안해도됨
	})
	$('.menu2 li a').click(function(e){ //클릭 이벤트가 발생했을 때
		e.preventDefault() //a를 링크로 이동안함
		$('.menu2 a').removeClass('on2') 
		$(this).addClass('on2')
		var href=this.getAttribute('href')
		$('.main2 img').attr({'src':href})
	})
})





<!-----------------------pentabreed.html ----------------------->
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>펜타브리드</title>
	<link rel="stylesheet" href="pentabreed.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="pentabreed.js"></script>
</head>
<body>
	<div class="wrap1">
		<div class="main1">
			<img src="thum1.jpg" alt="">
		</div>
		<div class="menu1">
			<ul>
				<li><a href="thum1.jpg" class="on"><img src="thum1.jpg" alt=""></a></li>
				<li><a href="thum2.jpg"><img src="thum2.jpg" alt=""></a></li>
				<li><a href="thum3.jpg"><img src="thum3.jpg" alt=""></a></li>
				<li><a href="thum4.jpg"><img src="thum4.jpg" alt=""></a></li>
				<li><a href="thum5.jpg"><img src="thum5.jpg" alt=""></a></li>
			</ul>
		</div>
	</div>
	<div class="wrap2">
		<div class="main2">
			<img src="thum1.jpg" alt="">
		</div>
		<div class="menu2">
			<ul>
				<li><a href="thum1.jpg" class="on2">비오템 라이프 플랑크톤™ 팝업스토어 운영</a></li>
				<li><a href="thum2.jpg">현대백화점 '스마일리 팬페스트' 공모전 개최</a></li>
				<li><a href="thum3.jpg">AIA생명, 프리미어 아카데미 월그래픽 디자인 제작</a></li>
				<li><a href="thum5.jpg">워커힐 호텔, 더글라스 하우스 웹사이트 오픈</a></li>
			</ul>
		</div>
	</div>
</body>
</html>




실행결과