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
42
43
44
45
|
<!DOCTYPE>
<html>
<head>
<title>Jquery 세상에 오신것을 환영 합니다.</title>
<script type="text/javascript"></script>
<script>
$(document).ready(function () {
alert('홈페이지에 방문해주셔서 감사합니다');
});
</script>
</head>
<body>
<input type="button" id="hideButton" value="숨기기" />
<input type="button" id="showButton" value="나타나기" />
<input type="button" id="togglebutton" value="토클" />
<input type="button" id="target" value="대상"/>
<script>
$('#hideButton').click(function () {
$('#target').hide();
});
$('#showButton').click(function () {
$('#target').show();
});
$('#togglebutton').click(function () {
$('#target').toggle();
if ($('#target').is(':visible')) {
$(this).val('Hide');
} else {
$(this).val('show');
};
});
</script>
</body>
</html>
| cs |
처음 접속했을 시에 모습
hise를 누름과 동시에 대상이 가려지고 hide는 show로 바뀌는 모습
jQuery부분의 코드를 보면 hide액션은 가리는 거고, show는 가려진 대상을 보여준다.
이 두가지의 기능을 합쳐준 것이 toggle이다.
1
2
3
4
5
6
7
|
if ($('#target').is(':visible')) {
$(this).val('Hide');
} else {
$(this).val('show');
};
| cs |
아래 코드를 보면
토글키를 누르면 토글 글씨가 그대로 유지가 되어 어떤 액션을 하는지 헤깔릴수 있다.
if문을 이용하여 id가 target의 상태를 가져와서 target이 보여져있으면, hide를 띄어주고 보여져 있지 않으면 show를 보여주게 된다.
아아 그리고 이런 액션이 들어간 jQuery는 body안에 스크립트를 넣어주어야 한다.
계속 head안에다가 넣고 했는데ㅜㅜ body안으로 옮기니깐 바로되네;;; ㅠㅠㅠㅠ
이놈의 삽질은 그만해야되는데.........
댓글
댓글 쓰기