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>
<!--외부 탭 끝-->