http://www.ishappy.net
오늘은 동주와 연정이가 사랑을 시작한지 5747일째,
[결혼]한지 4256일째 되는 날입니다.
사랑한지 5800일째 되는 날은
2020년 02월 4일입니다.
결혼한지 4300일째 되는 날은
2020년 01월 26일입니다.
PROFILE
BOARD
팁 & 테크
오늘의 영어
GALLERY
LINK
팁 & 테크

제목: 내용 숨기기
분류: HTML/JavaScript
이름: 유동주(voice74) * http://www.ishappy.net


등록일: 2006-12-08 22:23
조회수: 4151 / 추천수: 988
아래의 내용은
처음 로드하면 화면에 목록만 보여지고 목록을 클릭하면 그 목록에 해당하는 내용이 보여지는 스크립트이다.
div 태그를 사용하여 숨길 내용을 감싸고
div태그의 속성 중 "display"속성을 수정하여 숨김 처리 또는 보임처리한다.
내용을 숨기기 위해서는 table태그로 묶여져 있는 내용만 가능하다.

<html>
        <head>
                <script>
                        function init_div ()
                        {
                                var list1 =  document.getElementById("list1");
                                var list2 =  document.getElementById("list2");
                                var list3 =  document.getElementById("list3");
                                var list4 =  document.getElementById("list4");

                                list1.style.display = "none";
                                list2.style.display = "none";
                                list3.style.display = "none";
                                list4.style.display = "none";
                        }

                        function ch_disp (id)
                        {
                                var ch_obj = document.getElementById (id);

                                if (ch_obj.style.display == "none")
                                        ch_obj.style.display = "";
                                else
                                        ch_obj.style.display = "none";
                        }
                </script>
        </head>

        <body onLoad = "init_div ()">
                <table width = 800>
                        <tr>
                                <td>
                                        <a href = "#" onClick = "ch_disp ('list1');">1. 목록 1입니다...</a>
                                </td>
                        </tr>
                        <tr>
                                <td>
                                        <div id = "list1">
                                        <table width = 100%>
                                                <tr>
                                                        <td>
                                                                목록1에 대한 내용<br>
                                                                목록1에 대한 내용<br>
                                                                목록1에 대한 내용<br>
                                                                목록1에 대한 내용<br>
                                                                목록1에 대한 내용<br>
                                                                목록1에 대한 내용<br>
                                                        </td>
                                                </tr>
                                        </table>
                                        </div>
                                </td>
                        </tr>
                        <tr>
                                <td>
                                        <a href = "javascript:ch_disp ('list2');">2. 목록 2입니다...</a>
                                </td>
                        </tr>
                        <tr>
                                <td>
                                        <div id = "list2">
                                        <table width = 100%>
                                                <tr>
                                                        <td>
                                                                목록2에 대한 내용<br>
                                                                목록2에 대한 내용<br>
                                                                목록2에 대한 내용<br>
                                                                목록2에 대한 내용<br>
                                                                목록2에 대한 내용<br>
                                                                목록2에 대한 내용<br>
                                                        </td>
                                                </tr>
                                        </table>
                                        </div>
                                </td>
                        </tr>
                        <tr>
                                <td>
                                        <a href = "#" onClick = "ch_disp ('list3');">3. 목록 3입니다...</a>
                                </td>
                        </tr>
                        <tr>
                                <td>
                                        <div id = "list3">
                                        <table width = 100%>
                                                <tr>
                                                        <td>
                                                                목록3에 대한 내용<br>
                                                                목록3에 대한 내용<br>
                                                                목록3에 대한 내용<br>
                                                                목록3에 대한 내용<br>
                                                                목록3에 대한 내용<br>
                                                                목록3에 대한 내용<br>
                                                        </td>
                                                </tr>
                                        </table>
                                        </div>
                                </td>
                        </tr>
                        <tr>
                                <td>
                                        <a href = "javascript:ch_disp ('list4');">4. 목록 4입니다...</a>
                                </td>
                        </tr>
                        <tr>
                                <td>
                                        <div id = "list4">
                                        <table width = 100%>
                                                <tr>
                                                        <td>
                                                                목록4에 대한 내용<br>
                                                                목록4에 대한 내용<br>
                                                                목록4에 대한 내용<br>
                                                                목록4에 대한 내용<br>
                                                                목록4에 대한 내용<br>
                                                                목록4에 대한 내용<br>
                                                        </td>
                                                </tr>
                                        </table>
                                        </div>
                                </td>
                        </tr>
                </table>
        </body>
</html>
-추천하기     -목록보기  
의견(코멘트)을 작성하실 수 없습니다. 이유: 권한이 없는 회원레벨
Copyright 1999-2019 Zeroboard / skin by DQ'Style 
다음은 웹 페이지에서 이메일 주소를 긁어가는 스패머들을 위한 선물입니다. :-)
[root@localhost], [admin@localhost], [webmaster@localhost], [abuse@localhost], [webmaster@cwd.go.kr], [cnpa100@npa.go.kr]
Copyright (C)2005 Yoo, Dong Ju (, )