티스토리 뷰

코드 스니펫 복사


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


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


오늘은 자바스크립트를 이용해서 특정 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>



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


신고
댓글
댓글쓰기 폼
공지사항
Total
2,515,019
Today
1,196
Yesterday
1,294
«   2017/11   »
      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    
글 보관함