티스토리 뷰

오늘은 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>

댓글