루미집사

클릭만으로 박스숨기고 보여주기...

· 2003-11-25 (화) 02:25:11 · 1908 · 2
제목을 뭘로 정해야 할지 모르겠네요..
아는 사람은 다 알것도 같은데...
이렇게 글올리는게.. 제가 너무 쑵스럽네요
아래의 소스좀 보시고 좀더 간략하게 하는 방법을 아시는분은 좀 알려주세요
꼭좀 부탁 드리겠습니다....

일단 적용은 됐는데... 소스가 너무 기네요.. ㅠㅠ
이런것도 팁이 될려지...
적용된 페이지는 공개 못하겠네요^^
설명보단 아래의 소스를 복사해서 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>
|

댓글 2개

익스만 사용가능하군요
모질라,네스케이프에서는 다음과 같은 에러가..
Error: document.styleSheets.headers has no properties
[+],[ -] <= 이걸 마우스로 클릭하면 해당하는 테이블이 사라졌다 다시 나타납니다.
댓글을 작성하시려면 로그인이 필요합니다.

그누3 팁자료실

1,026건
+
제목 글쓴이 날짜 조회
03-11-24 조회 2,519
03-11-23 조회 2,366
03-11-22 조회 1,803
JJ.Mando
03-11-21 조회 2,822
JJ.Mando
03-11-21 조회 3,493
03-11-21 조회 1,710
03-11-19 조회 3,019
03-11-18 조회 2,137
03-11-17 조회 3,405
03-11-17 조회 4,372
03-11-17 조회 3,102
03-11-17 조회 1,967
03-11-15 조회 3,371
03-11-15 조회 2,544
03-11-15 조회 3,734
03-11-15 조회 2,713
03-11-14 조회 2,884
03-11-14 조회 2,152
네네모똘
03-11-14 조회 3,023
03-11-13 조회 2,309