사이드 메뉴 현재메뉴 active 어떻게 할까요ㅠㅠ?
본문
안녕하세요ㅠㅠ..
디자이너다 보니 소스를 잘 몰라서 어떻게 진행해야 할지 몰라 도움의 손길을 내밉니다ㅠㅠ..
아래 코드를 이용해서 사이드메뉴를 만들었는데,
저기서 클래스명을 넣었더니 해당페이지의 2depth에 전부 클래스명이 들어갑니다.ㅠㅠ
현재 페이지에만 클래스명을 넣으려면 어디를 건드리거나,
추가해야할까요ㅠㅠ?
<script type="text/javascript">
<!--
function display_submenu(num) {
document.getElementById("mysub" + num).style.display = "block";
}
//
-->
</script>
<style TYPE="text/css">
#mysubmenu {
width: 300px;
height: auto;
background: #f8f8f8;
border: 1px solid #e4e4e4;
border-top: 0;
border-bottom: 0;
}
#mysubmenu ul {
list-style: none;
font-size: 11pt;
margin: 0;
padding: 0;
}
#mysub0>a {
font-size: 18px !Important;
}
#mysubmenu .leftmenu_b {
background-color: #1e504a;
text-align: left;
font-weight: 600;
color: #fff;
padding: 30px
}
#mysubmenu .leftmenu_s {
padding: 20px 30px;
background-color: #f8f8f8;
border-bottom: 1px solid #e4e4e4;
}
#mysubmenu a {
text-decoration: none;
font-weight: 500;
font-size: 15px;
}
#mysubmenu .leftmenu_s:hover{background:#fff;}
</style>
<div id="mysubmenu">
<?php
$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
$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;
?>
</ul>
<?php } ?>
</div>
답변 1
<div id="mysubmenu">
~
</div>
<script>
$('#mysubmenu a').each(function() {
let _href = $(this).attr('href');
if (_href.indexOf(location.pathname) > -1)
$(this).parent().addClass('active');
else
$(this).parent().removeClass('active');
});
</script>
답변 감사드립니다 ㅠㅠ..!
그치만 이렇게 해봤더니 ul에 클래스가 붙어버리고,
혹시나 해서 parent()를 빼봣더니 모든 a에 클래스가 붙어버립니다.ㅠㅠ
모든 a가 아닌 그 페이지의 메뉴a에만 클래스를 붙일 수 있을까요ㅠㅠ..?
<div id="mysubmenu">
~
</div>
<script>
$('#mysubmenu a').each(function() {
let _href = $(this).attr('href');
if (location.pathname.indexOf(_href) > -1)
$(this).addClass('active');
else
$(this).removeClass('active');
});
</script>
답변을 작성하시기 전에 로그인 해주세요.
