보관할 메뉴 항목이 나는 메뉴가

Question

을 강조 : http://jsfiddle.net/hu5x3hL1/1/

HTML

<ul id="menu" class="sidebar"> 
<li> <a href="#" class="clickme">Menu</a> 
    <ul id="menu1"> 
     <li><a class="dropdown-class-name" href="#">Dropdown link1</a></li> 
     <li><a class="dropdown-class-name" href="#">Dropdown link2</a></li> 
    </ul> 
</li> 

jQuery를

$('#menu1 li a').click(function(e) { 
    $('a').removeClass('dropdown-class-name active'); 
    $(this).addClass('dropdown-class-name active'); 
}); 

CSS

#menu1 li a.active{ 
    font-weight:bold; 
} 

활성 메뉴 항목은 굵게 강조 표시되어 있습니다. 그러나 내 웹 사이트에서 일부 드롭 다운 링크를 클릭하면 새 페이지가 열리지 만 활성 메뉴 항목은 이미 굵게 표시되지 않습니다. 웹 사이트의 새 페이지에서 굵게 강조 표시하는 방법?

나는이 할 노력 : 나는 그것이 바로 아이디어라고 생각

$(document).ready(function() { 
     var url = window.location.href; 
     $("#menu1 li a").click(function() { 
      if (url == (this.href)) { 
       $('a').removeClass('dropdown-class-name active'); 
       $(this).addClass('dropdown-class-name active'); 
      } 
     }); 
    }); 

을하지만, 어디 실수가 될 수 있습니까?

Answer 1

링크를 클릭하면 메뉴가 다시로드되고 활성 링크의 상태가 손실되는 문제가 있습니다. 이전 페이지에서 메뉴 항목을 활성화하면 HTML 페이지가 다시로드되고 메뉴 항목에 활성 클래스가 설정되어 있지 않으므로 브라우저는 페이지를 새 페이지로 이동합니다.이 페이지는 더 이상 활성화되지 않습니다.

페이지로드시 Javascript 기능을 사용하면 어떤 메뉴 항목이 현재 URL에 해당하는지 확인하고 해당 항목을 활성으로 설정해야합니다. 따라서 링크를 따라 가면 활성 클래스가 설정되고 & 새 페이지가로드되고 실제로 새 페이지에서 볼 수 있습니다.

$(document).ready(function() { 
    var url = window.location 

    var menuItem = $('#menu1 li a').filter(function() { 
    return this.href == url; 
    }) 

    menuItem.addClass('active'); 
})