jquery
[jQuery] 특정 태그 On/Off 토글 기능 만들기
http://portfolio.wonpaper.net
2024. 7. 2. 18:39
실무에서 자주 쓰이는 기능이다.
꼭 익혀주자. jquery 문법을 이용하면 코딩이 훨씬 간결해진다.
show() , hide() 함수가 핵심이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<a href="#none" onclick="mView('01')">홍길동 open</a>
<a href="#none" onclick="mView('02')">이순신 open</a>
<div class="planner_modal planner_01">
<div class="planner_modal_close_btn"><img src="/img_240626/planner_close.png" alt=""></div>
<div class="planner_modal_profile"><img id="md_img" src="/img_240626/planner/profile/hong.png" alt="">
</div>
<div class="planner_modal_wrap">
<div class="planner_modal_name">
<p id="md_name">홍길동 <span>PLANNER</span></p>
<div class="insta_icon"><a href="#none"><img src="/img_240626/planner_modal_insta_icon.png" alt=""></a>
</div>
</div>
</div>
</div>
<div class="planner_modal planner_02">
<div class="planner_modal_close_btn"><img src="/img_240626/planner_close.png" alt=""></div>
<div class="planner_modal_profile"><img id="md_img" src="/img_240626/planner/profile/hong2.png" alt="">
</div>
<div class="planner_modal_wrap">
<div class="planner_modal_name">
<p id="md_name">이순신 <span>PLANNER</span></p>
<div class="insta_icon"><a href="#none"><img src="/img_240626/planner_modal_insta_icon.png" alt=""></a>
</div>
</div>
</div>
</div>
<script>
function mView(num) {
$(`.planner_modal.planner_${num}`).show();
$('.planner_modal_close_btn').click(function () {
$('.planner_modal').hide();
})
}
</script>
|
cs |