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

자유게시판

출석체크 십년전오늘 포인트가위바위보 포인트야구게임

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

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

본문

<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 너무 신기한 자바!

오늘도 열공하겟습니다.~
추천
0
  • 복사

댓글 11개

간지의제왕 자기소개 아이디로 검색 회원게시물
(211.♡.♡.24)
09.12.29 17:43:21
<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);

탭갯수가 많아질때를 대비해서 위와같이 하는게 낫지 않을까요?
내컴퓨터 홈페이지 자기소개 아이디로 검색 회원게시물
(210.♡.♡.11)
09.12.29 18:20:22
<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>

이 소스로 수정~ 하하
부르타스 자기소개 아이디로 검색 회원게시물
(211.♡.♡.145)
09.12.29 19:33:57
<div style="width:206px">
<table width="206px".......

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

테이블태그위에 디브태그를 넣엇는데...이유가...먼가요?
내컴퓨터 홈페이지 자기소개 아이디로 검색 회원게시물
(210.♡.♡.11)
09.12.29 20:02:22
그것이 보시면 <table></table><table></table> 두개가 나란히 잇는데요 위에 테이블은 탭메뉴구분자 아래 테이블은 출력자거든요 그런데... 이 출력자와 구분자가 서로 엇갈리게 노인상황 즉 한개는 왼쪽으로가고 한개는 오른쪽으로 가버리니 서로 깨지는 현상이 발생해서 전체 크기를 잡아주어 깔끔하게 처리한거에요~ 또 206px 는 테이블에 얇은 선을 넣을경우 발생하는 선 굵기 버그 때문에 어쩔수 없는거에요 ~
목록
문의 PC 버전
© SIRSOFT
현재 페이지 제일 처음으로