티스토리 뷰

IT 이야기/프로그래밍

[Javascript] getElementById 예제 - 링크 보이기/숨기기

하늘과 나b 2011. 12. 5. 12:54
오늘은 Javascript의 getElementById()를 사용한 예제를 한번 보도록 하겠습니다.


 실행화면  


이 예제는 링크1을 누르면 링크1을 숨기고 링크2를 보이게 하고
링크2를 누르면 링크1을 보이게 하고 링크2를 숨기는 예제입니다. 


실행하면 아래와 같이 나옵니다.


링크2를 누르면 아래와 같이 나옵니다.
 


그러면 이제 소스를 한번 살펴볼까요?


 소스 보기   




<html>
<head>
<script type="text/javascript">
function fn_onload()
{
  document.getElementById('link1').style.visibility = "hidden";
  document.getElementById('link2').style.visibility = "visible";
}
function link1_onclick() {
  document.getElementById('link1').style.visibility = "hidden";
  document.getElementById('link2').style.visibility = "visible";
}

function link2_onclick() {
  document.getElementById('link1').style.visibility = "visible";
  document.getElementById('link2').style.visibility = "hidden";
}
</script>
</head>

<body onload="fn_onload();">
<p>이 예제는 링크1을 누르면 링크1을 숨기고 링크2를 보이게 하고<br/>
링크2를 누르면 링크1을 보이게 하고 링크2를 숨기는 예제입니다.</p>
  <a href="#" id="link1" onclick="javascript:link1_onclick();">링크1</a>
  <a href="#" id="link2" onclick="javascript:link2_onclick();">링크2</a>  
</body>
</html>
저작자표시

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

당신이 사용하고 있는 브라우저에서 HTML5를 사용한다면 점수는?  (0) 2011.12.07
[HTML 쉽게 이해하기 강좌] - <input> 태그  (0) 2011.12.07
[HTML 쉽게 이해하기 강좌] - <form> 태그  (0) 2011.12.07
[HTML 쉽게 이해하기 강좌] - Element Level에 대해서  (0) 2011.12.05
[HTML 쉽게 이해하기 강좌] - DOCTYPE에 대해서  (0) 2011.12.05
[C언어] 함수 rand(), srand() 쉽게 이해하기  (55) 2011.12.05
[Javascript] 홈페이지에 현재의 년월일을 이미지로 된 숫자로 표시하는 자바스크립트 소스  (1) 2011.12.03
[HTML 쉽게 이해하기 강좌] - <h1>~<h6> 태그에 대해서  (0) 2011.12.03
[HTML 쉽게 이해하기 강좌] - <head> 태그에 대해서  (0) 2011.12.02
[HTML 쉽게 이해하기 강좌] - HTML 문서의 기본 구조  (0) 2011.12.02
공유하기 링크
댓글