<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
margin: 1px;
}
body {
overflow: hidden;
}
#box1 {
height: 100px;
background-color: coral;
transform: translateX(-97%);
transition: all 1s;
}
#box2 {
height: 100px;
background-color: lightblue;
transform: translateX(97%);
transition: all 1s;
}
#box1.on, #box2.on {
transform: translateX(0);
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$("button:eq(0)").on("click", function() {
$("#box1").toggleClass("on");
});
$("button:eq(1)").on("click", function() {
$("#box2").toggleClass("on");
});
$("button:eq(2)").on("click", function() {
$("button:eq(0)").trigger("click");
$("button:eq(1)").trigger("click");
});
});
</script>
<div id="box1"></div>
<div id="box2"></div>
<button>액션1</button>
<button>액션2</button>
<button>액션3</button>
</body>
</html>
toggleClass를 사용해 box 에 on class를 추가하면 위에 스타일이 적용되어 폼이 변경되는 방식
수행결과
버튼 1 : 왼쪽 주황박스
버튼 2 : 오른쪽 파랑박스
버튼 3: 두개 동시 조작
'개발자노트 > 웹' 카테고리의 다른 글
| HTML - API 사용하기 ( 구글맵API , Marker icon 변경 ) (0) | 2022.07.29 |
|---|---|
| HTML - jQuery를 이용한 toggle() 예제 ( 사진 열기 ) (0) | 2022.07.28 |
| HTML - 마우스 이벤트 (0) | 2022.07.27 |
| HTML - 광고배너 / 갤러리 등에 사용되는 예제 (0) | 2022.07.27 |
| HTML - 아코디언 메뉴 예제 (0) | 2022.07.27 |
