<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<style>
.wrap{width: 450px; margin: auto; border: 1px solid #000;}
.box{display: flex;/* 부모에 자식을 붙여주세요라는 뜻 */ justify-content: space-between;/* 가로를 서로 나누어 정렬하세요. 왼쪽 오른쪽 정렬 */ align-items: center;/* 세로 정렬을 가운데로 */}
.box li{border:1px solid green; padding:15px; cursor: pointer;}
.box li.on{background: rgb(10, 219, 219)}
.box img{width: 100%;}
.avata{width: 350px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
// alert() //결과값 확인. 실행여부 체크할때 사용
$(function(){
$(".show").click(function(){
$("ul li").removeClass("on")
$(this).addClass("on")
$(".char1").show()
})
$(".hide").click(function(){
$("ul li").removeClass("on")
$(this).addClass("on")
$(".char1").hide()
})
$(".tg").click(function(){
$("ul li").removeClass("on")
$(this).addClass("on")
$(".char1").toggle()
})
$(".fin").click(function(){
$("ul li").removeClass("on")
$(this).addClass("on")
$(".char2").fadeIn()
})
$(".fout").click(function(){
$("ul li").removeClass("on")
$(this).addClass("on")
$(".char2").fadeOut()
})
$(".ftg").click(function(){
$("ul li").removeClass("on")
$(this).addClass("on")
$(".char2").fadeToggle()
})
$(".sd").click(function(){
$("ul li").removeClass("on")
$(this).addClass("on")
$(this).parent('ul').prev().slideDown()
})
$(".su").click(function(){
$("ul li").removeClass("on")
$(this).addClass("on")
$(this).parent('ul').prev().slideUp()
})
$(".stg").click(function(){
$("ul li").removeClass("on")
$(this).addClass("on")
$(this).parent('ul').prev().slideToggle()
})
});
</script>
</head>
<body>
<div class="wrap">
<div class="box">
<div class="avata char1"><img src="/0919/SSI_20171007154542_V.jpg"></div>
<ul>
<li class="show">show</li>
<li class="hide">hide</li>
<li class="tg">toggle</li>
</ul>
</div>
<div class="box">
<div class="avata char2"><img src="download.png"></div>
<ul>
<li class="fin">fade in</li>
<li class="fout">fade out</li>
<li class="ftg">fadeToggle</li>
</ul>
</div>
<div class="box">
<div class="avata char1"><img src="/0919/SSI_20171007154542_V.jpg"></div>
<ul>
<li class="sd">slideDown</li>
<li class="su">slideUp</li>
<li class="stg">slideToggle</li>
</ul>
</div>
</div>
</body>
</html>
'얼렁뚱땅코드 > jquery' 카테고리의 다른 글
| 클릭하면 다른 이미지와 다른 글씨들이 보이게 하기:호텔농심참고 (0) | 2019.09.26 |
|---|---|
| 0926 첫수업 (0) | 2019.09.26 |
| 마우스올리면 이미자가 변경되게 하기 (0) | 2019.09.24 |
| 190924 두번째 수업 (0) | 2019.09.24 |
| 190919 첫수업 (0) | 2019.09.19 |