클릭만으로 박스숨기고 보여주기... 정보
javascript 클릭만으로 박스숨기고 보여주기...
본문
제목을 뭘로 정해야 할지 모르겠네요..
아는 사람은 다 알것도 같은데...
이렇게 글올리는게.. 제가 너무 쑵스럽네요
아래의 소스좀 보시고 좀더 간략하게 하는 방법을 아시는분은 좀 알려주세요
꼭좀 부탁 드리겠습니다....
일단 적용은 됐는데... 소스가 너무 기네요.. ㅠㅠ
이런것도 팁이 될려지...
적용된 페이지는 공개 못하겠네요^^
설명보단 아래의 소스를 복사해서 html 화일로 저장을 한다음 직접 실행해 보시면 됩니다.
어디서 구했는지는 생각도 안나네요. 몇년전에 구한거였는데...
자료를 프린트 할때 쓰면 상당히 유용할것 같아서 올렸습니다.
혹시나 필요하신분 있을까봐서요...
================================================================
<STYLE ID="all" TYPE="text/css">#test1</STYLE>
<STYLE ID="all1" TYPE="text/css">#test2</STYLE>
<STYLE ID="all2" TYPE="text/css">#test3</STYLE>
<STYLE ID="all3" TYPE="text/css">#test4</STYLE>
<STYLE ID="all4" TYPE="text/css">#test5</STYLE>
<STYLE ID="headers" TYPE="text/css" DISABLED>#test1 {display:none}</STYLE>
<STYLE ID="headers1" TYPE="text/css" DISABLED>#test2 {display:none}</STYLE>
<STYLE ID="headers2" TYPE="text/css" DISABLED>#test3 {display:none}</STYLE>
<STYLE ID="headers3" TYPE="text/css" DISABLED>#test4 {display:none}</STYLE>
<STYLE ID="headers4" TYPE="text/css" DISABLED>#test5 {display:none}</STYLE>
<table width=500 cellpadding=0 cellspacing=0 border=1><tr>
<td>
테이블1<br>
<a ONCLICK="document.styleSheets['headers'].disabled = false; document.styleSheets['all'].disabled = true;">[-]</a>
<a ONCLICK="document.styleSheets['headers'].disabled=true; document.styleSheets['all'].disabled=false;">[+]</a>
</td>
<td>
테이블2<br>
<a ONCLICK="document.styleSheets['headers1'].disabled = false; document.styleSheets['all1'].disabled = true;">[-]</a>
<a ONCLICK="document.styleSheets['headers1'].disabled=true; document.styleSheets['all1'].disabled=false;">[+]</a>
</td>
<td>
테이블3<br>
<a ONCLICK="document.styleSheets['headers2'].disabled = false; document.styleSheets['all2'].disabled = true;">[-]</a>
<a ONCLICK="document.styleSheets['headers2'].disabled=true; document.styleSheets['all2'].disabled=false;">[+]</a>
</td>
<td>
테이블4<br>
<a ONCLICK="document.styleSheets['headers3'].disabled = false; document.styleSheets['all3'].disabled = true;">[-]</a>
<a ONCLICK="document.styleSheets['headers3'].disabled=true; document.styleSheets['all3'].disabled=false;">[+]</a>
</td>
<td>
테이블5<br>
<a ONCLICK="document.styleSheets['headers4'].disabled = false; document.styleSheets['all4'].disabled = true;">[-]</a>
<a ONCLICK="document.styleSheets['headers4'].disabled=true; document.styleSheets['all4'].disabled=false;">[+]</a>
</td>
</tr></table>
<table width=500 cellpadding=0 cellspacing=0 border=1>
<tr>
<td><DIV ID="test1">테이블1-1</DIV></td>
<td><DIV ID="test2">테이블2-1</DIV></td>
<td><DIV ID="test3">테이블3-1</DIV></td>
<td><DIV ID="test4">테이블4-1</DIV></td>
<td><DIV ID="test5">테이블5-1</DIV></td>
</tr></tr>
<td><DIV ID="test1">테이블1-2</DIV></td>
<td><DIV ID="test2">테이블2-2</DIV></td>
<td><DIV ID="test3">테이블3-2</DIV></td>
<td><DIV ID="test4">테이블4-2</DIV></td>
<td><DIV ID="test5">테이블5-2</DIV></td>
</tr><tr>
<td><DIV ID="test1">테이블1-3</DIV></td>
<td><DIV ID="test2">테이블2-3</DIV></td>
<td><DIV ID="test3">테이블3-3</DIV></td>
<td><DIV ID="test4">테이블4-3</DIV></td>
<td><DIV ID="test5">테이블5-3</DIV></td>
</td></tr></table>
아는 사람은 다 알것도 같은데...
이렇게 글올리는게.. 제가 너무 쑵스럽네요
아래의 소스좀 보시고 좀더 간략하게 하는 방법을 아시는분은 좀 알려주세요
꼭좀 부탁 드리겠습니다....
일단 적용은 됐는데... 소스가 너무 기네요.. ㅠㅠ
이런것도 팁이 될려지...
적용된 페이지는 공개 못하겠네요^^
설명보단 아래의 소스를 복사해서 html 화일로 저장을 한다음 직접 실행해 보시면 됩니다.
어디서 구했는지는 생각도 안나네요. 몇년전에 구한거였는데...
자료를 프린트 할때 쓰면 상당히 유용할것 같아서 올렸습니다.
혹시나 필요하신분 있을까봐서요...
================================================================
<STYLE ID="all" TYPE="text/css">#test1</STYLE>
<STYLE ID="all1" TYPE="text/css">#test2</STYLE>
<STYLE ID="all2" TYPE="text/css">#test3</STYLE>
<STYLE ID="all3" TYPE="text/css">#test4</STYLE>
<STYLE ID="all4" TYPE="text/css">#test5</STYLE>
<STYLE ID="headers" TYPE="text/css" DISABLED>#test1 {display:none}</STYLE>
<STYLE ID="headers1" TYPE="text/css" DISABLED>#test2 {display:none}</STYLE>
<STYLE ID="headers2" TYPE="text/css" DISABLED>#test3 {display:none}</STYLE>
<STYLE ID="headers3" TYPE="text/css" DISABLED>#test4 {display:none}</STYLE>
<STYLE ID="headers4" TYPE="text/css" DISABLED>#test5 {display:none}</STYLE>
<table width=500 cellpadding=0 cellspacing=0 border=1><tr>
<td>
테이블1<br>
<a ONCLICK="document.styleSheets['headers'].disabled = false; document.styleSheets['all'].disabled = true;">[-]</a>
<a ONCLICK="document.styleSheets['headers'].disabled=true; document.styleSheets['all'].disabled=false;">[+]</a>
</td>
<td>
테이블2<br>
<a ONCLICK="document.styleSheets['headers1'].disabled = false; document.styleSheets['all1'].disabled = true;">[-]</a>
<a ONCLICK="document.styleSheets['headers1'].disabled=true; document.styleSheets['all1'].disabled=false;">[+]</a>
</td>
<td>
테이블3<br>
<a ONCLICK="document.styleSheets['headers2'].disabled = false; document.styleSheets['all2'].disabled = true;">[-]</a>
<a ONCLICK="document.styleSheets['headers2'].disabled=true; document.styleSheets['all2'].disabled=false;">[+]</a>
</td>
<td>
테이블4<br>
<a ONCLICK="document.styleSheets['headers3'].disabled = false; document.styleSheets['all3'].disabled = true;">[-]</a>
<a ONCLICK="document.styleSheets['headers3'].disabled=true; document.styleSheets['all3'].disabled=false;">[+]</a>
</td>
<td>
테이블5<br>
<a ONCLICK="document.styleSheets['headers4'].disabled = false; document.styleSheets['all4'].disabled = true;">[-]</a>
<a ONCLICK="document.styleSheets['headers4'].disabled=true; document.styleSheets['all4'].disabled=false;">[+]</a>
</td>
</tr></table>
<table width=500 cellpadding=0 cellspacing=0 border=1>
<tr>
<td><DIV ID="test1">테이블1-1</DIV></td>
<td><DIV ID="test2">테이블2-1</DIV></td>
<td><DIV ID="test3">테이블3-1</DIV></td>
<td><DIV ID="test4">테이블4-1</DIV></td>
<td><DIV ID="test5">테이블5-1</DIV></td>
</tr></tr>
<td><DIV ID="test1">테이블1-2</DIV></td>
<td><DIV ID="test2">테이블2-2</DIV></td>
<td><DIV ID="test3">테이블3-2</DIV></td>
<td><DIV ID="test4">테이블4-2</DIV></td>
<td><DIV ID="test5">테이블5-2</DIV></td>
</tr><tr>
<td><DIV ID="test1">테이블1-3</DIV></td>
<td><DIV ID="test2">테이블2-3</DIV></td>
<td><DIV ID="test3">테이블3-3</DIV></td>
<td><DIV ID="test4">테이블4-3</DIV></td>
<td><DIV ID="test5">테이블5-3</DIV></td>
</td></tr></table>
추천
0
0
댓글 전체
익스만 사용가능하군요
모질라,네스케이프에서는 다음과 같은 에러가..
Error: document.styleSheets.headers has no properties
모질라,네스케이프에서는 다음과 같은 에러가..
Error: document.styleSheets.headers has no properties
[+],[ -] <= 이걸 마우스로 클릭하면 해당하는 테이블이 사라졌다 다시 나타납니다.