서브메뉴 클릭시 선택된 메뉴명에 클래스 추가 (active) 하는 방법
본문
안녕하세요. 아래와 같이 skin을 사용해서 좌측서브메뉴를 사용하는데,
서브메뉴 .leftmenu_b 를 클릭하여 페이지를 이동했을시 현재 페이지에 클릭한 메뉴에만 클래스를 추가해서 하이라이트를 주고 싶습니다.. 어떻게 하는게 좋을까요?
<script type="text/javascript">
function display_submenu(num) {
document.getElementById("mysub"+num).style.display="block";
}
</script>
<style TYPE="text/css">
#left_submenu {position: absolute; left: -250px; top: 60px; width: 200px;}
#left_submenu ul {list-style:none; margin:0; padding:0;}
#left_submenu .leftmenu_b {line-height:70px; background-color:#192535; text-align:center;font-size:18px;font-weight:bold; color: #fff;}
#left_submenu .leftmenu_s {line-height:50px; padding-left:20px; border: 1px solid #aaa; border-bottom:none; font-weight: bold; font-size:14px; background:#fff url(/theme/company/img/submenu_arrow.png) no-repeat 150px 10px}
#left_submenu .leftmenu_s:hover{background: #b5c0ce;}
#left_submenu .leftmenu_s_on{background: #000;}
#left_submenu .leftmenu_bottom{height: 4px; background: #192535;}
#left_submenu a {text-decoration:none; display: block;}
#left_submenu a:active {background: #b5c0ce;}
</style>
<div id="left_submenu">
<?php
$gnb_menus = array();
$sql = " select *
from {$g5['menu_table']}
where me_use = '1'
and length(me_code) = '2'
order by me_order, me_id ";
$result = sql_query($sql, false);
$gnb_zindex = 999; // gnb_1dli z-index 값 설정용
for ($i=0; $row=sql_fetch_array($result); $i++) {
?>
<ul id="mysub<?php echo $i ?>" style="display:none;">
<a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" ><li class="leftmenu_b"><?php echo $row['me_name'] ?></li></a>
<?php
$submenus = '';
$sql2 = " select *
from {$g5['menu_table']}
where me_use = '1'
and length(me_code) = '4'
and substring(me_code, 1, 2) = '{$row['me_code']}'
order by me_order, me_id ";
$result2 = sql_query($sql2);
//좌측 서브메뉴 전체 리스트에서 현재 페이지에 해당하는 대메뉴 리스트만 보여줌
if ( ($row['me_name']==$board['bo_subject'])||($row['me_name']==$g5['title']) ) {
echo ("<script language='javascript'> display_submenu(" .$i. " ); </script> ");
}
for ($k=0; $row2=sql_fetch_array($result2); $k++) {
if($k == 0)
echo '<ul>'.PHP_EOL;
?>
<a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" ><li class="leftmenu_s">- <?php echo $row2['me_name'] ?></li></a>
<?php
//좌측 서브메뉴 전체 리스트에서 현재 페이지에 해당하는 대메뉴 리스트만 보여줌
if ( ($row2['me_name']==$board['bo_subject'])||($row2['me_name']==$g5['title']) ) {
echo ("<script language='javascript'> display_submenu(" .$i. " ); </script> ");
}
}
if($k > 0)
echo '</ul>'.PHP_EOL;
?>
<li class="leftmenu_bottom"></li>
</ul>
<?php } ?>
</div>
답변을 작성하시기 전에 로그인 해주세요.
