탭메뉴1 탭메뉴2 탭메뉴3
...","url":"https://sir.kr/boards/free/384379","author":{"@type":"Person","name":"내컴퓨터","url":"https://sir.kr/profile/70d4d697-18ef-45ed-8716-a83b386a7f7d"},"interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":11}],"datePublished":"2009-12-29T17:22:25+09:00","dateModified":"2009-12-29T17:22:25+09:00","comment":[{"@type":"Comment","text":"\r\nfunction tab(tab) {\r\nfor(var i=1; i","author":{"@type":"Person","name":"간지의제왕"},"datePublished":"2009-12-29T17:43:21+09:00"},{"@type":"Comment","text":"좋은데요 좋은 팁 (?)감사해요~","author":{"@type":"Person","name":"내컴퓨터"},"datePublished":"2009-12-29T17:55:51+09:00"},{"@type":"Comment","text":"시간되시면 서브게시판(왼쪽메뉴)의 펼침/접음 메뉴도 좀 부탁드려요","author":{"@type":"Person","name":"부르타스"},"datePublished":"2009-12-29T17:56:43+09:00"},{"@type":"Comment","text":"서브게시판? 왼쪽펼침메뉴?","author":{"@type":"Person","name":"내컴퓨터"},"datePublished":"2009-12-29T18:08:36+09:00"},{"@type":"Comment","text":"네.... \r\n근데 검색하니깐 그런게 있더라구요.\r\nhttp://passone.tistory.com/327?srchid=BR1http%3A%2F%2Fpassone.tistory.com%2F327","author":{"@type":"Person","name":"부르타스"},"datePublished":"2009-12-29T18:16:56+09:00"},{"@type":"Comment","text":"이거 만들수 잇어요 지금 본문 링크에 구현햇어요\r\n\r\nhttp://starcom.wo.tc/job/index2.php","author":{"@type":"Person","name":"내컴퓨터"},"datePublished":"2009-12-29T18:18:55+09:00"},{"@type":"Comment","text":" \r\n// 마우스 오버시 ~ ㅋㅋ \r\n function over(a,b,c,aa,ab,ac) { \r\na.style.display = 'block';\r\nb.style.display = 'none';\r\nc.style.display = 'none';\r\naa.style.color = 'black';\r\nab.style.color = 'gray';\r\nac.style.color = 'gray';\r\n}\r\n \r\n\r\n \r\n \r\n공지사항 \r\n자유게시판 \r\nQ&A질답...","author":{"@type":"Person","name":"내컴퓨터"},"datePublished":"2009-12-29T18:20:22+09:00"},{"@type":"Comment","text":"좋은팁고맙습니다~","author":{"@type":"Person","name":"이진철"},"datePublished":"2009-12-29T19:11:16+09:00"},{"@type":"Comment","text":" \r\n","author":{"@type":"Person","name":"부르타스"},"datePublished":"2009-12-29T19:33:57+09:00"},{"@type":"Comment","text":"그것이 보시면 두개가 나란히 잇는데요 위에 테이블은 탭메뉴구분자 아래 테이블은 출력자거든요 그런데... 이 출력자와 구분자가 서로 엇갈리게 노인상황 즉 한개는 왼쪽으로가고 한개는 오른쪽으로 가버리니 서로 깨지는 현상이 발생해서 전체 크기를 잡아주어 깔끔하게 처리한거에요~ 또 206px 는 테이블에 얇은 선을...","author":{"@type":"Person","name":"내컴퓨터"},"datePublished":"2009-12-29T20:02:22+09:00"}]}

자바스크립트 조금만 배워도 이렇게 쓸대가 많네요

<script language="javascript">
// 탭메뉴 하핫~
 function over(a,b,c) {
a.style.display = 'block';
b.style.display = 'none';
c.style.display = 'none';
}
</script>

<table>
<tr>
<!-- over(a,b,c) 는 추가 sub가 가능합니다. 추가 sub의 경우 스크립트문을 수정해주시고, over(a,b,c,d,e)와 같이 사용하시면 됩니다. 현재는 3개라서 over(a,b,c)를 사용햇습니다. -->
<td onmouseover="over(a,b,c)">탭메뉴1</td>
<td onmouseover="over(b,a,c)">탭메뉴2</td>
<td onmouseover="over(c,a,b)">탭메뉴3</td>
</tr>
</table>

<table>
<tr>
<td>
<div id="a" name="a" style="display:block">
<? echo latest("basic", "notice", 5, 40); ?>
</div>
<div id="b" name="b" style="display:none">
<? echo latest("basic", "free", 5, 40); ?>
</div>
<div id="c" name="c" style="display:none">
<? echo latest("basic", "qna", 5, 40); ?>
</div></td>
</tr>
</table>

헤헷 질문게시판에 탭메뉴 구현방법알려달라길래~ 자바를 조금 응용해서 작성해서 답변해드렷어요~ http://starcom.wo.tc/job/index2.php 너무 신기한 자바!

오늘도 열공하겟습니다.~
|

댓글 11개

<script>
function tab(tab) {
for(var i=1; i<4; i++)
document.getElementById("tab_"+i).style.display='none';
document.getElementById(tab).style.display='block';
}
</script>

<div id='tab_1' style='display:block'>
tab1
</div>
<div id='tab_2' style='display:none'>
tab2
</div>
<div id='tab_3' style='display:none'>
tab3
</div>

onmouseover = tab(1);

탭갯수가 많아질때를 대비해서 위와같이 하는게 낫지 않을까요?
좋은데요 좋은 팁 (?)감사해요~
시간되시면 서브게시판(왼쪽메뉴)의 펼침/접음 메뉴도 좀 부탁드려요
서브게시판? 왼쪽펼침메뉴?
네....
근데 검색하니깐 그런게 있더라구요.
http://passone.tistory.com/327?srchid=BR1http%3A%2F%2Fpassone.tistory.com%2F327
이거 만들수 잇어요 지금 본문 링크에 구현햇어요

http://starcom.wo.tc/job/index2.php
<script language="javascript">
// 마우스 오버시 ~ ㅋㅋ
function over(a,b,c,aa,ab,ac) {
a.style.display = 'block';
b.style.display = 'none';
c.style.display = 'none';
aa.style.color = 'black';
ab.style.color = 'gray';
ac.style.color = 'gray';
}
</script>
<div style="width:206px">
<table width="206px" border=1 cellspacing="0" bordercolor="#CCCCCC" bordercolordark="white" bordercolorlight="#cccccc">
<tr height="25px">
<td align="center" id="aa" name="aa" onmouseover="over(a,b,c,aa,ab,ac)" style="color:gray">공지사항</td>
<td align="center" id="ab" name="ab" onmouseover="over(b,a,c,ab,aa,ac)" style="color:gray">자유게시판</td>
<td align="center" id="ac" name="ac" onmouseover="over(c,a,b,ac,aa,ab)" style="color:gray">Q&A질답</td>
</tr>
</table>
<div id="a" name="a" style="display:block">
<? echo latest("basic", "notice", 5, 40); ?>
</div>
<div id="b" name="b" style="display:none">
<? echo latest("basic", "free", 5, 40); ?>
</div>
<div id="c" name="c" style="display:none">
<? echo latest("basic", "qna", 5, 40); ?>
</div>
</div>

이 소스로 수정~ 하하
좋은팁고맙습니다~
<div style="width:206px">
<table width="206px".......

이렇게 되었는데요..
제가 초보라서 궁금한게...

테이블태그위에 디브태그를 넣엇는데...이유가...먼가요?
그것이 보시면 <table></table><table></table> 두개가 나란히 잇는데요 위에 테이블은 탭메뉴구분자 아래 테이블은 출력자거든요 그런데... 이 출력자와 구분자가 서로 엇갈리게 노인상황 즉 한개는 왼쪽으로가고 한개는 오른쪽으로 가버리니 서로 깨지는 현상이 발생해서 전체 크기를 잡아주어 깔끔하게 처리한거에요~ 또 206px 는 테이블에 얇은 선을 넣을경우 발생하는 선 굵기 버그 때문에 어쩔수 없는거에요 ~
아하~~ 그렇군요...
아..html 좀 안다고 했는데..
역시 다시 기본부터 차근 차근..... -.-;;;;
댓글을 작성하시려면 로그인이 필요합니다.

자유게시판

+
제목 글쓴이 날짜 조회
16년 전 조회 1,692
16년 전 조회 1,740
16년 전 조회 1,835
16년 전 조회 2,482
16년 전 조회 1,751
16년 전 조회 2,540
16년 전 조회 1,961
16년 전 조회 2,416
16년 전 조회 1,819
16년 전 조회 2,043
16년 전 조회 1,517
16년 전 조회 1,685
16년 전 조회 1,778
16년 전 조회 1,857
16년 전 조회 2,252
16년 전 조회 1,317
16년 전 조회 1,423
16년 전 조회 1,318
16년 전 조회 2,039
16년 전 조회 1,758
16년 전 조회 1,477
16년 전 조회 1,388
16년 전 조회 1,594
16년 전 조회 1,697
16년 전 조회 1,862
16년 전 조회 1,405
16년 전 조회 1,555
16년 전 조회 1,945
16년 전 조회 1,560
16년 전 조회 1,437
이전 첫 페이지 다음
클릭클릭
글쓰기