묻고답하기
XE와 관련 없는 내용이라 요기에 살짝(질문)
2012.10.19 12:30
XE와 관련이 없는 내용이라서 이곳에 질문 좀 올리겠습니다. (욕 안 먹을려는지 모르겠지만...)
아래 탭 소스를 이용하여 각기 다른 위젯을 삽입하여 사용하고 있는데
이게 한 페이지당 두 개 이상 적용시 충돌하여, 하나 밖에 응용을 못 하고 있습니다.
이것을 한 페이지에 두 개 이상 사용할 수 있는 방법 좀 알려 주시면,감사하겠습니다.
아울러 다른 초보 회원님들께서도 사이트에 적용하면 좋을 것 같습니다.
<!--외부 탭 메뉴-->
<script type="text/javascript">
function change(tab) {
tab1.style.display = "none";
tab2.style.display = "none";
tab3.style.display = "none";
tab4.style.display = "none";
tab.style.display = "block";
}
</script>
<!--외부 탭-->
<div style="padding-bottom:10px; border:solid 1px #dddddd;">
<div id="tab1" style="display:block">
<table border="0" cellpadding="0" cellspacing="0" width="248" align="center">
<TR>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<TR>
<td valign="top" align="center" style="padding:6px 0; border-top:solid 1px #dddddd; border-right:solid 1px #dddddd;" bgcolor="white">
<span><b>랭킹</b></span>
</td>
<td valign="top" align="center" style="padding:6px 0; border-top:solid 1px #dddddd; border-right:solid 1px #dddddd; border-bottom:solid 1px #dddddd;">
<span onMouseOver="change(tab2)">최근글</span>
</td>
<td valign="top" align="center" style="padding:6px 0; border-top:solid 1px #dddddd; border-right:solid 1px #dddddd; border-bottom:solid 1px #dddddd;">
<span onMouseOver="change(tab3)">댓글</span>
</td>
<td valign="top" align="center" style="padding:6px 0; border-top:solid 1px #dddddd; border-bottom:solid 1px #dddddd;">
<span onMouseOver="change(tab4)">포토</span>
</td>
</TR>
</TABLE>
</td>
</tr>
<tr><td align="left" valign="top" style="padding-top:0px;" bgcolor="white">
위젯1 넣는 곳
</td> </tr>
</table>
</div>
<div id="tab2" style="display:none">
<table border="0" cellpadding="0" cellspacing="0" width="248" align="center">
<TR>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<TR>
<td valign="top" align="center" style="padding:6px 0; border-top:solid 1px #dddddd; border-bottom:solid 1px #dddddd;">
<span onMouseOver="change(tab1)">랭킹</span>
</td>
<td valign="top" align="center" style="padding:6px 0; border-top:solid 1px #dddddd; border-left:solid 1px #dddddd;" bgcolor="white">
<span><b>최근글</b></span>
</td>
<td valign="top" align="center" style="padding:6px 0; border-top:solid 1px #dddddd; border-left:solid 1px #dddddd; border-bottom:solid 1px #dddddd;">
<span onMouseOver="change(tab3)">댓글</span>
</td>
<td valign="top" align="center" style="padding:6px 0; border-top:solid 1px #dddddd; border-left:solid 1px #dddddd; border-bottom:solid 1px #dddddd;">
<span onMouseOver="change(tab4)">포토</span>
</td>
</TR>
</TABLE>
</td>
</tr>
<tr><td align="left" valign="top" style="padding:6px 0 0 4px;" bgcolor="white">
위젯2 넣는 곳
</td> </tr>
</table>
</div>
<div id="tab3" style="display:none">
<table border="0" cellpadding="0" cellspacing="0" width="248" align="center">
<TR>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<TR>
<td valign="top" align="center" style="padding:6px 0; border-top:solid 1px #dddddd; border-right:solid 1px #dddddd; border-bottom:solid 1px #dddddd;">
<span onMouseOver="change(tab1)">랭킹</span>
</td>
<td valign="top" align="center" style="padding:6px 0; border-top:solid 1px #dddddd; border-bottom:solid 1px #dddddd;">
<span onMouseOver="change(tab2)">최근글</span>
</td>
<td valign="top" align="center" style="padding:6px 0; border-top:solid 1px #dddddd; border-left:solid 1px #dddddd;" bgcolor="white">
<span><b>댓글</b></span>
</td>
<td valign="top" align="center" style="padding:6px 0; border-top:solid 1px #dddddd; border-left:solid 1px #dddddd; border-bottom:solid 1px #dddddd;">
<span onMouseOver="change(tab4)">포토</span>
</td>
</TR>
</TABLE>
</td>
</tr>
<tr><td align="left" valign="top" style="padding-top:2px;" bgcolor="white">
위젯3 넣는 곳
</td> </tr>
</table>
</div>
<div id="tab4" style="display:none">
<table border="0" cellpadding="0" cellspacing="0" width="248" align="center">
<TR>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<TR>
<td valign="top" align="center" style="padding:6px 0; border-top:solid 1px #dddddd; border-right:solid 1px #dddddd; border-bottom:solid 1px #dddddd;">
<span onMouseOver="change(tab1)">랭킹</span>
</td>
<td valign="top" align="center" style="padding:6px 0; border-top:solid 1px #dddddd; border-bottom:solid 1px #dddddd;">
<span onMouseOver="change(tab2)">최근글</span>
</td>
<td valign="top" align="center" style="padding:6px 0; border-top:solid 1px #dddddd; border-left:solid 1px #dddddd; border-bottom:solid 1px #dddddd;">
<span onMouseOver="change(tab3)">댓글</span>
</td>
<td valign="top" align="center" style="padding:6px 0; border-top:solid 1px #dddddd; border-left:solid 1px #dddddd; bgcolor="white">
<span><a href="/humor_zone"><b>포토</b></a></span>
</td>
</TR>
</TABLE>
</td>
</tr>
<tr><td align="left" valign="top" style="padding-top:6px;" bgcolor="white">
<!--포토-->
위젯4 넣는 곳
</td> </tr>
</table>
</div>
</div>
<!--외부 탭 끝-->
