탭 메뉴
본문
이런식으로 메뉴를 누르면 서브메뉴가 나오게 만들었는데
이거를 서브메뉴가 하나 열려있는상태에서 다른 메뉴를 누르면 열려있던건 닫히게 만들고 싶습니다..
어떻게 해야될지를 몰라서 조언 구합니다 부탁드려요
<script src="/js/common2.js" type="text/javascript"></script>
<script language="javascript">
function subinit(){
//-----------------------다음 코드는 페이지마다 다릅니다.
var foldarr = new Array();
foldarr.push("fold01");
foldarr.push("fold02");
foldarr.push("fold03");
foldarr.push("fold04");
foldarr.push("fold05");
//-------------------------------------------
var sn = location.href.split("sn=");var sn = parseInt(sn[1]);
for(i=0;i<foldarr.length;i++){
var obj = document.getElementById(foldarr[i]);
obj.style.display = "none";
}
var obj = document.getElementById(foldarr[sn]);
obj.style.display = "inline-block";
}
</script>
<header id="hd">
<h1 id="hd_h1"><?php echo $g5['title'] ?></h1>
<div class="to_content"><a href="#container">본문 바로가기</a></div>
<?php
if(defined('_INDEX_')) { // index에서만 실행
include G5_MOBILE_PATH.'/newwin.inc.php'; // 팝업레이어
} ?>
<div id="hd_wrapper">
<a href="/index.php"><img src="<?php echo G5_THEME_IMG_URL ?>/logo.png"></a>
<br>
<?php if(!defined('_INDEX_')) { ?>
<body onload="subnit();">
<img src="<?php echo G5_THEME_IMG_URL ?>/sub1.png" onclick='subtoggle("fold01");'>
<li onclick="" id="fold01" style="display: none;">
<table>
<tr><img src="<?php echo G5_THEME_IMG_URL ?>/sub1_1.png"></tr>
<tr><img src="<?php echo G5_THEME_IMG_URL ?>/sub1_2.png"></tr>
<tr><img src="<?php echo G5_THEME_IMG_URL ?>/sub1_3.png"></tr>
<tr><img src="<?php echo G5_THEME_IMG_URL ?>/sub1_4.png"></tr>
<tr><img src="<?php echo G5_THEME_IMG_URL ?>/sub1_5.png"></tr>
</table>
</li>
<img src="<?php echo G5_THEME_IMG_URL ?>/sub2.png" onclick='subtoggle("fold02");'>
<li onclick="" id="fold02" style="display: none;">
<table>
<tr><img src="<?php echo G5_THEME_IMG_URL ?>/sub2_1.png"></tr>
<tr><img src="<?php echo G5_THEME_IMG_URL ?>/sub2_2.png"></tr>
<tr><img src="<?php echo G5_THEME_IMG_URL ?>/sub2_3.png"></tr>
<tr><img src="<?php echo G5_THEME_IMG_URL ?>/sub2_4.png"></tr>
</table>
</li>
<img src="<?php echo G5_THEME_IMG_URL ?>/sub4.png" onclick='subtoggle("fold03");'>
<li onclick="" id="fold03" style="display: none;">
<table>
<img src="<?php echo G5_THEME_IMG_URL ?>/sub4_1.png">
<img src="<?php echo G5_THEME_IMG_URL ?>/sub4_2.png">
</table>
</li>
<img src="<?php echo G5_THEME_IMG_URL ?>/sub3.png" onclick='subtoggle("fold04");'>
<li onclick="" id="fold04" style="display: none;">
<table>
<img src="<?php echo G5_THEME_IMG_URL ?>/sub3_1.png">
<img src="<?php echo G5_THEME_IMG_URL ?>/sub3_2.png">
</table>
</li>
</body>
<?php } ?>
답변 1
var obj = document.getElementById(foldarr[sn]);
obj.style.display = "inline-block";
위 구문을 보니 해당 id 값을 가져와서 보여주는거 같은데
해당 아이디가 선택되었을 시 나머지는 display:none 으로 처리 하면 되겠네요
조건문 (if) 사용해서요.
머릿속으로는 감은 오는데.. 막상 하려면 이게 안되네요 ㅠㅠ
너무 기초가 부족한거같습니다...
답변을 작성하시기 전에 로그인 해주세요.
