티스토리 뷰

IT 이야기/프로그래밍

자바스크립트(javascript)를 이용한 토글(toggle) 예제

하늘과 나b 2012. 11. 21. 23:52


자바스크립트를 이용한 토글 예제


토글이라는 말 아시나요? 한번 누르면 들어가고 한번 누르면 나오고 하는게 토글이라고 보시면 쉽겠네요. 


오늘은 자바스크립트를 이용해서 특정 ID를 가진 객체가 사라졌다가 나왔다가 하는 토글 기능을 만들어 볼건데요 먼저 토글 기능의 소스코드를 작성하기 전에 실행화면을 보도록 하겠습니다.



menu 버튼을 누르기 전 화면


menu 버튼을 누른 후의 화면



보셨나요?
menu 버튼을 누르면 내용이라는 글자가 보였다가 menu 버튼을 한번 더 누르면 내용이라는 글자가 사라지는 것을 보셨을 것입니다. 그러면 이제부터 그 소스를 작성해 보도록 하겠습니다.



소스코드



<script type="text/javascript">
function showID(id)
{
obj=document.getElementById(id);

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



위와 같은 함수를 사용해서 만들어 보도록 하겠습니다.


전체 예제 소스코드입니다.



<html>
<head>
<title>자바스크립트를 이용한 토글 예제</title>

<script type="text/javascript">
function showID(id)
{
obj=document.getElementById(id);

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

<body>
    <div id="content_bt">
        <a href="#" onclick="showID('content');">menu</a>
    </div>
    <div id="content" style="display:none;">
        내용
    </div>
</body>
</html>



소스코드 화면의 우측 상단의 첫번째 버튼을 누르면 원본 소스를 보실 수 있습니다.
 여러분도 한번 만들어 보세요^^


'IT 이야기 > 프로그래밍' 카테고리의 다른 글

[C언어] C언어 프로그래밍 - 시간 계산 소스  (16) 2013.03.18
웹페이지에서 드래그 방지 소스  (6) 2013.03.03
[C/C++] 1부터 n까지 합을 구하는 소스(재귀)  (4) 2012.11.29
[C언어 오류해결] Run-Time Check Failure #2 - Stack around the variable '변수이름' was corrupted 오류 한방에 해결하기  (9) 2012.11.25
[C언어 소스] *(별모양) 출력하는 예제 소스  (0) 2012.11.22
JavaScript 오류 코드 모음  (0) 2012.11.21
C언어 무료 컴파일러 추천! Code::Blocks  (8) 2012.11.21
[C언어] 특정키를 눌렀을 때 반복 종료 하기  (0) 2012.11.21
[C언어 예제] 자연수 n을 입력받아 특정 모양 만들기  (0) 2012.11.21
[C언어 예제 소스] 4x4 형태의 사각형 1로 채우기  (1) 2012.11.17
공유하기 링크
댓글