Riucc's Storage

[JQuery] - display : block, none 로 div 보이게 안보이게 하기

JQuery&Javascript2019. 10. 9. 22:56

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

○ display : block, none 로 div 보이게 안보이게 하기

- display : block, none 로 div 보이게 안보이게 하기

CSS 속성값 확인

$("변경하려는 대상").css("display"); // 출력 none, block

CSS 속성값 변경

$("변경하려는 대상").css("display","속성값"); // 속성값 : none, block

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
<div class="test">
    <select name="stbType" id="stbType">
        <option value="_0">Design</option>
        <option value="_1">User</option>
        <option value="_2">Admin</option>
        <option value="_3">Dragon</option>
    </select>
 
    <div class="oneView" id="oneView">
        <span>입력방법1 : </span><input type="text" readonly /> 링크
    </div>
    <div class="twoView" id="twoView" style="display:none;">
        <span>입력방법2 : </span><input type="text" />
    </div>
    <div class="threeView" id="threeView" style="display:none;">
        <span>입력방법3 : </span><input type="text" value="" disabled />
    </div>
</div>
 
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#stbType').on('change', function () {
            if ($(this).val() == '_0') {
                $('#oneView').css('display', 'block');
                $('#twoView').css('display', 'none');
                $('#threeView').css('display', 'none');
            } else if ($(this).val() == '_1') {
                $('#oneView').css('display', 'none');
                $('#twoView').css('display', 'block');
                $('#threeView').css('display', 'none');
            } else {
                $('#oneView').css('display', 'none');
                $('#twoView').css('display', 'none');
                $('#threeView').css('display', 'block');
            }
        });
    });
</script>
Colored by Color Scripter
cs

저작자표시

'JQuery&Javascript' 카테고리의 다른 글

[Javascript] - location.href 와 location.replace 차이 (0)	2019.10.11
[JQuery] - ajax 사용 시, 페이지 새로고침하기(RedirectToAction 안먹음) (0)	2019.10.11
[JQuery] - 선택박스(select) 이벤트 처리(값마다 뷰 다르게) (0)	2019.10.09
[JQuery] - 동적으로 생성된 태그 실행 : on() (0)	2019.05.03
[JQuery] - 태그 속성 값 가져오기 : attr() (0)	2019.05.03

이전 1 ··· 6 7 8 9 10 11 12 ··· 593 다음

최근 등록 현황

달력

일	월	화	수	목	금	토
					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

카운터

[JQuery] - display : block, none 로 div 보이게 안보이게 하기

'JQuery&Javascript' 카테고리의 다른 글

최근 글

최근 월별 글

최근 댓글

최근 글

최근 월별 글

최근 댓글

최근 글

최근 월별 글

최근 댓글

지난달

2024.11

다음달

티스토리툴바