메뉴 건너뛰기

조회 수 5957 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

[ShowHide.htm]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>보이기 및 숨기기</title>

    <style type="text/css">

        #my.hover {

            cursor:pointer;

            background-color:Yellow;

    </style>

    <script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            //[1] 기본값 설정

            $(".region").show(); // region 영역 보이기

            $("#moreRegion").hide(); // more.. 숨기기

           

            //[2] more.. 클릭시 보이기 및 숨기기

            $("span.more").click(function() {

                // 3000 : 3, 'slow', 'normal', 'fast'

                $("#moreRegion").show('slow'); // 천천히 보이기

                $(this).hide('fast'); // more 버튼 숨기기

            });

        });

    </script>

</head>

<body>

<div class="region" style="display:none;">

안녕하세요. 여기는 본문입니다.

<span class="more">more...</span>

</div>

<div id="moreRegion" style="height:100px;background-color:Yellow;">

또 만나요

</div>

</body>

</html>

 



-------------------------------------------------------------------------------------

 


[실행결과]

--> 첫 화면.






--> 위의 그림에서 "more..."텍스트를 마우스로 클릭하였을 때의 화면


List of Articles
번호 제목 날짜 조회 수
237 EditText의 글자 수 제한 걸기 2015.07.16 13881
236 Effects - Animate() 메서드 (여러가지 효과 동시 처리) file 2014.10.16 30627
235 Effects - FadeIn() / FadeOut() 메서드 (서서히 보이기 및 숨기기) file 2014.10.16 6069
» Effects - Show() / Hide() 메서드 (보이기 및 숨기기) file 2014.10.16 5957
233 Effects - SlideToggle() 메서드 (슬라이드 업/다운) file 2014.10.16 6758
232 Effects - SlideUp() 메서드 (슬라이드업) file 2014.10.16 5999
231 Effects - Stop() 메서드 (애니메이션 효과 멈추기) file 2014.10.16 6225
230 Events - Unbind() 메서드 (이벤트 처리기 해제) file 2014.10.16 5749
229 Firebase - 푸시알림 보내기 file 2021.09.30 339
228 Firebase - 푸시알림 보내기 (2) 2021.09.30 768
227 Fragment를 통한 하단탭 예제1 file 2020.12.14 242
226 Fragment에서 Toast 사용하기 2020.12.14 371
225 FTPClient 를이용하여 ftp상 서버에서 데이터 다운로드 편 2014.08.28 9853
224 FTPClient 를이용한 데이터 업로드 하기 2014.08.28 6366
223 HTML5 Better semantic tags file 2014.09.04 5952
222 HTML5 Form 공부하기 -1- file 2014.09.04 5841
221 HTML5 Form 공부하기 -2- file 2014.09.04 6329
220 HTML5 Geolocation (구글 지도에 현위치 표시하기) file 2014.09.04 6810
219 HTML5 Speech Input (음성인식) API 2014.09.04 6454
218 HTML5 Web Storage -01- file 2014.09.04 5587
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved