Javascript/jQuery를 사용하여 현재 페이지를 기반으로하는 동적 탐색 경로

Question

나는 here 질문을 보았고 실제로 탐색 할 필요가 없다면 그 대답이 충분하다고 보았습니다. 사용자가 수준 3으로 이동했을 경우를 기반으로,

<nav class="items"> 
<ul> 
<li><a href="test.html">Test 1</a></li> 
<li><a href="test2.html">Test 2</a> 
    <ul> 
     <li><a href="level1.html">Level 1</a></li> 
     <li><a href="test/level2.html">Level 2</a> 
      <ul> 
       <li><a href="test/level2/level3.html">Level 3</a></li> 
       <li><a href="test/level2/level32.html">Also at level 3</a></li> 
      </ul> 
     </li> 
    </ul> 
</li> 
<li><a href="test3.html">Test 3</a></li> 
</ul> 
</nav> 

:

나는, 현재 페이지의 URL을 기반으로, 해당 페이지의 부모와 함께 빵 부스러기를 만들 수 있습니다 자바 스크립트/jQuery를 스크립트, IE 필요 현재 페이지에서 쇼 : 그것은 온로드 작동 있도록

홈 >> 테스트 2 >> 2 단계 >> 3 단계

이 스크립트는 모든 페이지에 포함됩니다.

Answer 1

페이지의 문서 준비 이벤트에서 다음 코드를 시도해 볼 수 있습니다. 당신이 탐색 링크와 함께 탐색 경로 원하는 Incase의 경우

Demo

var url = "level3.html"; <-- following line shows how to get this from url 
//location.pathname.substring(location.pathname.lastIndexOf("/") + 1); 
var currentItem = $(".items").find("[href$='" + url + "']"); 
var path = "home"; 
$(currentItem.parents("li").get().reverse()).each(function() { 
    path += "/" + $(this).children("a").text(); 
}); 
$(".bredcrumb").html(path); 

이 Demo

Answer 2

http 요청을 탐색하는 경우이 코드는 제대로 작동하지 않을 수 있습니다.

이 메뉴를 통해 이동하려면 html 페이지가 있어야합니다. 당신은 그 페이지에 따라 breadcrumb를 만들기 위해 가지고있는 모든 HTML 페이지의로드에 대해 작업하는 코드가있을 수 있습니다.

하지만 아약스를 통해 콘텐츠를 탐색하려는 경우이 코드를 사용할 수 있습니다. 그리고 click 이벤트에 콘텐츠로드 기능을 넣으십시오.