사이드 메뉴 현재메뉴 active 어떻게 할까요ㅠㅠ?

사이드 메뉴 현재메뉴 active 어떻게 할까요ㅠㅠ?

QA

사이드 메뉴 현재메뉴 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>

답변을 작성하시기 전에 로그인 해주세요.
전체 37
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT