jQuery : 활성 클래스/상태를 추가하고 보유하십시오!

이것이 가능한지 전혀 모르겠지만 지금은 링크가 잔뜩있는 왼쪽 탐색 모음이 있습니다. 나는 현재 링크를 가리키는 URL과 현재 페이지 URL을 확인하여 클릭하는 링크 항목에 상관없이 활성 클래스 (상태)를 추가합니다. 이것은 잘 작동합니다.jQuery : 활성 클래스/상태를 추가하고 보유하십시오!

$("#sidebar-nav ul li a").each(function() { 
if(this.href == window.location || this.href == document.location.protocol + "//" + window.location.hostname + window.location.pathname) 
$(this).addClass("active"); 
});

는 그러나, 나는 각각의 사이드 바 링크는 그래서 "카테고리"를 나타냅니다 때문입니다. 사람들이에 착륙 초기 페이지의 다른 페이지에서 클릭하는 동안 해당 요소의 활성 상태/클래스를 "유지"계속 필요 나는 URL이 일치하는 첫 페이지뿐만 아니라 전체 사이드 바 링크를 활성화하고 싶습니다.

사용자가 처음 방문한 페이지를 클릭하면 URL이 더 이상 일치하지 않으므로 활성 상태가 손실됩니다. 다른 sidbar nav를 클릭하면 활성 상태 만 제거되도록합니다. 희망적이라고 생각 되긴하지만 사람들이 사이드 바 nav ul의 다른 요소를 클릭하지 않는 한 처음에는 활성 상태로 설정하는 "hold"방법이 있습니까?

html로 :

<div id="sidebar-nav"> 
    <ul>       
    <li><a href="link1">Link One</a></li> 
    <li><a href="link2">Link Two</a></li> 
    <li><a href="link3">Link Three</a></li> 
    <li><a href="link4">Link Four</a></li> 
    </ul> 
</div>

출처

2010-12-27 IntricatePixels

HTML을 게시 할 수 있습니까? – Chandu

게시 됨. 문제는 내가/category1/link1 category1/link2와 같은 구조를 가지고 있지 않다는 것입니다 ... 그래서 아래의 제안은 작동하지 않습니다. – IntricatePixels

구조의 예제를 게시 할 수 있습니까? 본질적으로 URL에있는 항목은 유연한 솔루션을 원할 때 어떤 범주에 있는지 파악해야합니다.그렇지 않으면 특정 링크를 찾아 자바 스크립트의 하드 코딩 된 배열로 범주에 매핑 할 수 있지만 그렇게하면 유지 관리의 악몽을 만들 수 있습니다. – Adrian

간단한 (이 페이지의 기능을 억제하지 않는 한) 내가 생각할 수있는 방법은 링크에 앵커를 통과 한 후 페이지로드에 document.location.hash을 확인하고 카테고리를 "선택"입니다 따라서.

은 또한 이미 HREF을 비교하고 있기 때문에, 그냥 경로 위치를 비교하고 그들이 가정 (현재 경로로 시작하는 경우 다음과 같은 :

<ul> 
    <li><a href="/cateogry">Cateogory 1</a><ul> 
    <li><a href="/category1/sub1">Sub 1</a></li> 
    <li><a href="/category1/sub2">Sub 2</a></li> 
    <li><a href="/category1/sub3">Sub 3</a></li> 
    </l></li> 
    ... 
</ul>

위의 링크가있는 경우 (그리고 타겟 URL의 시작 부분입니다. 강조 표시로 저장됩니다.

(즉, 링크는 내비게이션과 같이 중첩되어 있습니다.) 그렇지 않다면, 링크 및 해시를 사용하지 않고 의사 변수를 전달한 다음 자바 스크립트를 사용하여 구문 분석을 수행 할 수 있습니다 (페이지로드시 다시 한번).

출처

2010-12-27 21:02:08

URL 일치 로직을 URL의 첫 번째 부분이이 "카테고리"의 예상 순서와 일치하는지 확인하는 정규 표현식으로 변경하려고합니다. 처음 두 링크 위의 예에서

ex. http://www.mysite.com/cars/priceguide.html 
     http://www.mysite.com/cars/listings.html 
     http://www.mysite.com/buses/priceguide.html

는 "자동차"카테고리과에 있습니다 URL이 "카테고리는"이 글은 무엇을 가리 키도록이 카테고리 내에서 각 페이지가 구성되어 있다고 가정 물론입니다 마지막은 "버스"카테고리에 있습니다.

출처

2010-12-27 21:02:53 Adrian

정규 표현식을 사용하면 관련 단편의 URL을 평가할 수 있습니다. URL 스키마에 따라 다릅니다. 예를 들어 사이트 URL을 사용하는 경우 다음과 같이

www.mysite.com/products 
www.mysite.com/products/widget 
www.mysite.com/products/wodget

당신은 첫 번째 디렉터리 수준 (www.mysite.com/products)를 추출하고 사용할 수있는 활성 링크를 참조한다.

출처

2010-12-27 21:03:37 Dan

jQuery : 활성 클래스/상태를 추가하고 보유하십시오!

답변

관련 문제