[jQuery] 제이쿼리 show, hide div 보여주기/숨기기
- 웹/JQuery
- 2020. 4. 25.
제이쿼리 쇼 / 하이드
jQuery show()
show() 요소를 보여줄때 사용합니다.
.css("display","block") 와 동일
$('#goodsBtn').click(function() {
$("#goodsDiv").show();
// goodsBtn을 클릭하면 goodsDiv를 보여줘라
})
jQuery hide()
show() 요소를 숨길때 사용합니다.
.css("display","none") 와 동일
$('#goodsBtn').click(function() {
$("#goodsDiv").hide();
// goodsBtn을 클릭하면 goodsDiv를 숨겨라
})
아래는 쇼/하이드 자바스크립트 예제소스입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<body>
<div>
<button id="goodsShowBtn">Show it</button>
<button id="goodsHideBtn">hide it</button>
<div id="goodsShowDiv">Hello</div>
</div>
</body>
<script>
$('#goodsShowBtn').click(function() {
$("#goodsShowDiv").show();
// goodsBtn을 클릭하면 goodsDiv를 보여줘라
})
$('#goodsHideBtn').click(function() {
$("#goodsShowDiv").hide();
// goodsBtn을 클릭하면 goodsDiv를 숨겨라
})
</script>
|
cs |
'웹 > JQuery' 카테고리의 다른 글
| [jQuery] 제이쿼리 each(), foreach, for반복문 예제 (0) | 2020.05.03 |
|---|---|
| [jQuery]제이쿼리 fadeIn, fadeOut 이펙트 효과 사용하기 (0) | 2020.05.02 |
| [jQuery] 제이쿼리 attr(), prop() 비교 및 차이점을 알아보자 (0) | 2020.05.01 |
| [jQuery] 제이쿼리 checkbox checked, 전체 선택, 전체 해제[체크박스] (0) | 2020.04.30 |
| [jQuery] 제이쿼리 포커스아웃/포커스인 이벤트 알아보기 (0) | 2020.04.25 |