테스트 사이트 - 개발 중인 베타 버전입니다

자바스크립트 탭 질문드립니다. 채택완료

모두 10년 전 조회 4,800

</p><p><table width="700" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="30" background="<?php echo G5_IMAGES_URL ?>/notice-bg.gif" valign="top">
                   <script type="text/javascript">
      function main_tab(arr_no) {
       var tab = new Array("menu01","menu02","menu03","menu04"); 
       var div = new Array("menu_div01","menu_div02","menu_div03","menu_div04"); 
       var more = new Array("javascript:menu_03_01();","javascript:menu_03_02();","javascript:menu_03_04();","javascript:menu_03_05();"); 
       var num = new Array(1,2,3,4);
       for(i=0;i<num.length;i++) { 
        document.getElementById(div[i]).style.display="none";
        document.getElementById(tab[i]).src='<?php echo G5_IMAGES_URL ?>/c1_'+num[i]+'off.jpg';
       } 
       document.getElementById(div[arr_no]).style.display="";
       document.getElementById(tab[arr_no]).src='<?php echo G5_IMAGES_URL ?>/c1_'+num[arr_no]+'on.jpg';
       document.getElementById("menu_more").href=more[arr_no];
       
      } 
       </script>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="120"><a href="javascript:main_tab(0);"><img src="<?php echo G5_IMAGES_URL ?>/c1_1on.jpg" name="menu01" width="120" height="42" border="0" id="menu01" /></a></td>
            <td width="119"><a href="javascript:main_tab(1);"><img src="<?php echo G5_IMAGES_URL ?>/c1_2off.jpg" name="menu02" width="119" height="42" border="0" id="menu02" /></a></td>
            <td width="119"><a href="javascript:main_tab(2);"><img src="<?php echo G5_IMAGES_URL ?>/c1_3off.jpg" name="menu03" width="119" height="42" border="0" id="menu03" /></a></td>
            <td width="119"><a href="javascript:main_tab(3);"><img src="<?php echo G5_IMAGES_URL ?>/c1_4off.jpg" name="menu04" width="119" height="42" border="0" id="menu04" /></a></td>
            <td align="right"> <!--<a href="javascript:menu_05_01();" id="menu_more"><img src="<?php echo G5_IMAGES_URL ?>/notice-more.gif" width="38" height="12" border="0" /></a>--></td>
          </tr>
      </table></td>
  </tr>
  <tr valign="top">
    <td style="padding-top:30px;">
    <div id="menu_div01"><?php include_once(G5_HTML_PATH.'/info1.html');  ?></div>
    <div id="menu_div02" style="display:none;" ><?php include_once(G5_HTML_PATH.'/info2.html');  ?></div>
    <div id="menu_div03" style="display:none;" ><?php include_once(G5_HTML_PATH.'/info3.html');  ?></div>
    <div id="menu_div04" style="display:none;" ><?php include_once(G5_HTML_PATH.'/info4.html');  ?></div>
    </td>
  </tr>
</table>​</p><p>

 

서브페이지에서 위와 같은 자바탭메뉴로 한페이지 내에서 페이지를 변경 가능하게 해 놓았는데요

문제가 메인 인덱스화면에서 서브페이지의 두번째 include파일로 링크를 잡아서 나오게 해야하는데

서브페이지로 실제로 접속하면 젤처음 include파일이 출력이 됩니다.

링크를 잡으려고 해도 어느탭을 누르던지 html/info.html 이런식으로 다 똑같이 나와서 잡을 수가 없네요.

혹시 자바스크립트 탭메뉴 링크 잡는 방법이 있나요?

 

 

 

댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
10년 전

http://benalman.com/code/projects/jquery-bbq/examples/fragment-advanced/#bbq1=chicken.html">http://benalman.com/code/projects/jquery-bbq/examples/fragment-advanced/#bbq1=chicken.html  

샘플 예제

 

location.hash="tab"+arr_no ;

 

뭐 이런식으로 hash 값을 변경해주시고

 

페이지 로딩시 처음

위 hash tab 값이 있으면 해당 탭을 show 해주는 방식으로 구현하시면되세요

 

예제 사이트 보시면, 이해되실것같습니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

모두
10년 전
답변감사드립니다.^^
그냥 소스 붙여넣고 쓰는 정도라 봐도 잘은 모르지만
한번 도전해 볼게요. 감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

10년 전

http://linebt.co.kr/bbs/board.php?bo_table=business1">http://linebt.co.kr/bbs/board.php?bo_table=business1

링크주소입니다.

 

메인인덱스에서 초등학교, 중학교, 고등학교, 대학교, 교육청 이라는 버튼을 만들어서

클릭시에 서브페이지에서 클릭한 버튼의 해당 페이지가 보여지게 하고싶은데

주소가 다 똑같이 나와서 링크를 못잡고 있어요..

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

유우니얌
10년 전
아 .. 탭은 정상 작동을 하는데,
주소값이 안바뀌신다는 말씀이시죠 ? refresh 해도 활성화된 탭을 보여주고싶으시다는?

그러시면 hash 값을 이용하셔야되세요

댓글을 작성하려면 로그인이 필요합니다.

10년 전

무슨 말씀인지 모르겟네용...  탭기능은 정상적으로 작동하는데 ,

해당 탭 컨텐츠내용이 다 동일하게 나온다는 말씀인가요 ?

사이트링크 고고고 올려줘 보세요 봐드릴게용

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인