window.location.href가 특정 문자열과 일치하지 않는 경우 요소에 CSS 클래스 추가

Question

javascript/jQuery를 처음 사용하고 페이지 URL이 과 일치하지 않으면 CSS 클래스를 요소에 추가하려고합니다. 중 하나 3 개의 현. 이 코드는 작동하지 않습니다.

if (window.location.href.match(/(interests|ideas|art)/) > -1) { 
    jQuery("#nav-about").addClass('active'); 
    } 

아이디어가 있으십니까? 내 구문이 올바르지 않습니까?

편집 :

그것은 모든 사람들이 저를 작동해야 주신 답변처럼 보이지만, 그들이되지 않습니다. 어쩌면 내 코드의 다른 줄이 충돌합니다.

$(document).ready(function() { 
    if (window.location.href.search(/(interests|ideas|art)/) > -1) { 
     jQuery("#nav-about").addClass('active'); 
    } 
    if (window.location.href.match(/(interests)/) != null) { 
    jQuery("#nav-interests").addClass('active'); 
    } 
    if (window.location.href.match(/(ideas)/) != null) { 
    jQuery("#nav-ideas").addClass('active'); 
    } 
    if (window.location.href.match(/(art)/) != null) { 
    jQuery("#nav-art").addClass('active'); 
    } 
}); 

내 사이트는 benxd.me입니다. 이 메인 페이지의 #nav-about 링크는 클래스 active이 필요한 것입니다. 이 페이지에서는 스크립트가 작동하지 않습니다. 다른 페이지의 스크립트, 관심 분야, 아이디어 및 사진 작업.

Answer 1

.search()이 아닌 .match()을 사용하고 싶습니다. .search()의 반환 값은 첫 번째 일치 항목의 인덱스이거나 일치 항목이없는 경우 -1입니다. .match() 반환 값은 : 전체 검색 결과 및 괄호 - 캡처 유사한 결과를 함유

Array; 일치 항목이없는 경우 null 위의 문제를 해결

는, 당신은 당신이 URL이 하지 일치를 수행 할 때 클래스를 추가 할 진술 한 점을 감안 코드가 있어야한다 :

이

if (window.location.href.search(/(interests|ideas|art)/) === -1) { 
    jQuery("#nav-about").addClass('active'); 
} 

Answer 2

당신은 string.search을 사용할 수 있습니다 또는 js의 string.indexOf 메소드. 다음은 예제 코드입니다.

if (url1.indexOf('ideas') > -1) { 
    // do your work 
} 

var url = 'http://localhost:3000/interests'; 
var url1 = 'http://localhost:3000/ideas'; 

if (url.search('interests') > -1) { 
    // do your work 
} 

또는

은 여기 바이올린입니다.

https://jsfiddle.net/Refatrafi/grxpmaon/3/

Answer 3

나는 동일한 기본 절차를 수행하려면 다음 함수를 사용합니다.

function NavSetActiveLink() { 
    var currentLocation = window.location.pathname; 
    $(".nav-element a").each(function(){ 
     if ($(this).attr('href') === currentLocation){ 
      $(this).addClass('active'); 
      return false; // break out of the loop 
     } 
    }); 
} 

함수 각각을 순환 .nav-element a 상대 링크를 가정하면, 현재 window.location.pathname 일치하는 HREF와 제 <a>를 찾는다.

네비게이션 요소에 각각 부모 또는 자녀 또는 자기와 직접적으로 관련된 <a> 태그가 있으면이 작업을 수행 할 수 있습니다.