div나 span 등의 태그에 고유ID를 준 후에, 내용을 적당히 묶고 링크에서 아래와 같이 호출합니다.
"내용 1" 부분에는 어떠한 태그라도 사용가능합니다.
또한 div나 span 등으로 묶지 않고 곧바로 table이나 iframe 태그에다가 id를 넣어주셔도 됩니다. ^_^
<a style='cursor:hand' onclick="MyMenu.style.display=''">보이기 1</a>
<div id=MyMenu style='display:none'>내용 1</div>
"내용 1" 부분의 style을 보시면 display:none으로 화면에 안보이게 설정된게 보이시죠?
여기서 "보이기 1" onclick에 이 display값을 공백으로 바꾸게 했으므로
"보이기 1"을 클릭하시면 id가 MyMenu인 부분이 보이게 됩니다. 쉽죠? ^_^
위와 같은 형식이라면 숨겼다가 보여주기는 식은 죽 먹기겠죠.
-----------------
그럼 좀더 어렵게 해보죠. 이번에는 쉽게 말해 toggle입니다.
즉, 보이는 상태에서 클릭하면 안보이게 숨겨버리고, 안보이는 상태에서 클릭하면 보여주는거죠.
Javascript의 if~else 구문을 이용하시면 간단하게 구현 가능합니다.
<a style='cursor:hand' onclick="if(MyMenu2.style.display=='none'){MyMenu2.style.display=''}else{MyMenu2.style.display='none'}">보이기 2</a>
<div id=MyMenu2 style='display:none'>내용 2</div>
onclick을 부분을 보시면 if문을 사용해서 MeMenu2 부분의 display 속성값을 체크해서 none이면 공백으로 none이 아니면 다시 none으로 바꿔버리는게 보이시죠? ^_^
이제 toggle이 가능해졌습니다. (예전에 제쯔에 있던 MyMenu 부분이 저런식이었죠 아마?)
-----------------
마지막으로 onclick 부분이 너무 지저분해졌으니 이부분을 Javascript 함수로 돌려보도록 합시다.
<script>
function toggleD(obj) {
if (obj.style.display == 'none') obj.style.display = ''; else obj.style.display = 'none'; }
</script>
<a style='cursor:hand' onclick=toggleD(MyMenu3);>보이기 3</span> <div id=MyMenu3 style='display:none'>내용 3</div>
두번째 방법에서의 onclick에 있던 if~else가 그대로 함수化 되었으며,
차이점이라면 obj라는 변수를 넘겨야한다는 것입니다.
따라서 onclick=toggleD(MyMenu3) 이렇게 잡아주시면 MyMenu3가 위의 함수의 obj값으로 넘어가게 되어 if~else문으로 MyMenu3의 display의 값을 체크해서 토글시키게 되는거죠.
활용범위가 매우 넓은 것이니 꼭 익혀두도록 합시; 쿨럭;
-----------------
꼬랑지 1. id=MyMenu1 이런 id값은 해당 페이지에 반드시 한개만 존재해야합니다.
해당 id를 가진 태그가 없거나, 같은 id를 가진 태그가 여러개라면 에러가 납니다.
꼬랑지 2. display라는 CSS Attribute를 visibility로 바꾸셔도 마찬가지로 보였다 안보였다하게 할 수 있습니다.
display의 none에 대응하는 visibilty의 값은 hidden입니다. 반대는 visible이구요.
display와 visibility의 차이점이라면, display는 none인 상태에서는 화면을 잡아먹지 않습니다.
visibility는 hidden인 상태에서도 화면을 잡아먹습니다.
즉, visibility를 hidden으로 해놓더라도 화면상에는 안보이는 부분이 차지하는 공백이 그대로 나타난다는거죠 ^_^
그럼 이만=3=3;
좋은 정보 올려주시는 분들께 이 게시물을 빌어; 감사드립니다 ^_^
"내용 1" 부분에는 어떠한 태그라도 사용가능합니다.
또한 div나 span 등으로 묶지 않고 곧바로 table이나 iframe 태그에다가 id를 넣어주셔도 됩니다. ^_^
<a style='cursor:hand' onclick="MyMenu.style.display=''">보이기 1</a>
<div id=MyMenu style='display:none'>내용 1</div>
"내용 1" 부분의 style을 보시면 display:none으로 화면에 안보이게 설정된게 보이시죠?
여기서 "보이기 1" onclick에 이 display값을 공백으로 바꾸게 했으므로
"보이기 1"을 클릭하시면 id가 MyMenu인 부분이 보이게 됩니다. 쉽죠? ^_^
위와 같은 형식이라면 숨겼다가 보여주기는 식은 죽 먹기겠죠.
-----------------
그럼 좀더 어렵게 해보죠. 이번에는 쉽게 말해 toggle입니다.
즉, 보이는 상태에서 클릭하면 안보이게 숨겨버리고, 안보이는 상태에서 클릭하면 보여주는거죠.
Javascript의 if~else 구문을 이용하시면 간단하게 구현 가능합니다.
<a style='cursor:hand' onclick="if(MyMenu2.style.display=='none'){MyMenu2.style.display=''}else{MyMenu2.style.display='none'}">보이기 2</a>
<div id=MyMenu2 style='display:none'>내용 2</div>
onclick을 부분을 보시면 if문을 사용해서 MeMenu2 부분의 display 속성값을 체크해서 none이면 공백으로 none이 아니면 다시 none으로 바꿔버리는게 보이시죠? ^_^
이제 toggle이 가능해졌습니다. (예전에 제쯔에 있던 MyMenu 부분이 저런식이었죠 아마?)
-----------------
마지막으로 onclick 부분이 너무 지저분해졌으니 이부분을 Javascript 함수로 돌려보도록 합시다.
<script>
function toggleD(obj) {
if (obj.style.display == 'none') obj.style.display = ''; else obj.style.display = 'none'; }
</script>
<a style='cursor:hand' onclick=toggleD(MyMenu3);>보이기 3</span> <div id=MyMenu3 style='display:none'>내용 3</div>
두번째 방법에서의 onclick에 있던 if~else가 그대로 함수化 되었으며,
차이점이라면 obj라는 변수를 넘겨야한다는 것입니다.
따라서 onclick=toggleD(MyMenu3) 이렇게 잡아주시면 MyMenu3가 위의 함수의 obj값으로 넘어가게 되어 if~else문으로 MyMenu3의 display의 값을 체크해서 토글시키게 되는거죠.
활용범위가 매우 넓은 것이니 꼭 익혀두도록 합시; 쿨럭;
-----------------
꼬랑지 1. id=MyMenu1 이런 id값은 해당 페이지에 반드시 한개만 존재해야합니다.
해당 id를 가진 태그가 없거나, 같은 id를 가진 태그가 여러개라면 에러가 납니다.
꼬랑지 2. display라는 CSS Attribute를 visibility로 바꾸셔도 마찬가지로 보였다 안보였다하게 할 수 있습니다.
display의 none에 대응하는 visibilty의 값은 hidden입니다. 반대는 visible이구요.
display와 visibility의 차이점이라면, display는 none인 상태에서는 화면을 잡아먹지 않습니다.
visibility는 hidden인 상태에서도 화면을 잡아먹습니다.
즉, visibility를 hidden으로 해놓더라도 화면상에는 안보이는 부분이 차지하는 공백이 그대로 나타난다는거죠 ^_^
그럼 이만=3=3;
좋은 정보 올려주시는 분들께 이 게시물을 빌어; 감사드립니다 ^_^
