jQuery 또는 Javascript에서 현재 URL을 기반으로 CSS를 변경할 수 있습니까?

내 콘텐츠와 별도의 파일에 내비게이션 영역이 있으며 PHP 포함을 사용하여 두 영역을 결합합니다. 내비게이션 영역 링크가 활성화 된 페이지, 즉 현재 URL을 기반으로 색상을 변경하도록합니다. 따라서 jQuery 또는 Javascript가 현재 URL (실제로는 home.html과 같은 파일 이름)을 읽고 CSS를 기반으로 작성하기를 원합니다.jQuery 또는 Javascript에서 현재 URL을 기반으로 CSS를 변경할 수 있습니까?

과 같이, 이 같은 파란색 nav.home.background-의 URL = home.html을 변경-CSS>

출처

2011-09-27 Jono

PHP를 통해 javascript로 이것을 수행 할 이유가 있습니까? PHP는 브라우저 일관성있는 솔루션을 제공합니다 (예 : javscript를 끄는 사용자의 영향을받지 않음) – n00dle

대답을 선택할 수 있습니까? – hunter

오프 내장 뭔가 될 것 확신 :

$("A").each(function() { 
    if (this.href == document.URL) { 
     $(this).addClass('active'); 
    } 
});

을 그 href 속성이 현재 문서 URL과 일치하면 모든 링크를 검사하고 요소 CSS 클래스에 'active'클래스를 추가합니다.

작은주의 사항 : 메뉴에서 언급되고 실제 문서에서 사용 된 절대 URL이 정확히 일치하는 경우에만 작동합니다. 현재 URL이 http://example.org/dir/ 인 경우 <a href="index.html">은 http://example.org/dir/index.html으로 바뀌므로 강조 표시되지 않습니다. <a href="/dir/">과 일치합니다.
(사이트 전체에서 각 페이지에 동일한 URL이 사용되도록하는 것이 좋습니다.검색 엔진 최적화 및 캐싱 프록시)

사용되는 다른 부분은 :

$("A") 모든 A 요소 (앵커)을 선택한다. 메뉴에있는 A 개의 요소를 모두 선택하여 조금 더 구체적으로 만들고 싶을 것입니다. $("#menu A"). [jQuery]
.each(func)은 선택한 각 요소에 대해 지정된 함수를 실행합니다. 이 함수 내에서 this은 선택된 요소를 나타냅니다. [jQuery]
this.href은 예상대로 HTML에 지정된 상대 위치가 아닌 absolute URI of the linked resource을 반환합니다. [표준 DOM]
$(this).addClass(clzName)은 지정된 요소에 CSS 클래스를 추가하는 데 사용됩니다. [jQuery를]

$("A") 문서가 완전히합니다 (BODY 태그의 onload 속성을 사용하여 $(document).ready()의 jQuery 이벤트 핸들러에서, 또는)로드 된 후 그것을 실행, 모든 요소를 찾아 확인하십시오.

출처

2011-09-27 17:43:54 beetstra

이것은 놀랍고 매우 우아합니다. 나는 그것을 (http://i5.nyu.edu/~jpr226/)-- $ ("A")하는 것은 실제로 어떻게 작동시킬 수 있습니까? jQuery가 필요합니까? – Jono

예, jQuery가 필요합니다. 내 대답을 조금 더 설명하도록 업데이트하겠습니다. – beetstra

$ (this) .addClass ('active')가 작동하지 않는 것 같습니다. 나는이 라인 아래에 "alert (this)"를 추가하여 무엇이 (이)가 포함되어 있는지 보려고했는데, 현재 url을 알려주는 경고를 받는데, 나는 그것이 어떻게 든 그것을 선택하는 좋은 일을하지 않는다고 믿게한다. 요소는 – Jono

뭔가

var url = $(location).attr('href'); 
    //get the url 

if(url.indexOf('home.html') != -1){ 
    //indeOf returns -1 if item not found in string 
    //so if it is not -1 (that is, found) 
    //then apply the styles 
    $('#nav').css('background','blue'); 
}

당신은 아마 스위치 또는 경우 문을 필요로하는 경우, 하지만 모든 URL/섹션을 처리해야합니다.

var url = $(location).attr('href'); 
var fileName = url.slice(url.lastIndexOf('/') + 1); 

switch (fileName){ 
    case 'home.html': 
     $('#nav').css('background','blue'); 
     break; 
    case 'about.html': 
     $('#nav').css('background','red'); 
     break; 
}

출처

2011-09-27 16:53:02

자바 스크립트에서 현재 URL을 읽으려면

뭔가 같은 :

var url = window.location.href;

은 주어진 요소에 css 속성을 변경하려면 :

$('some_selector').css({ backgroundColor, 'blue' });

출처

2011-09-27 16:53:28

var url_arr = document.URL.split('/'), 
    page = url_arr[url_arr.length - 1]; 

switch (page) { 
    case 'home.html': 
     $('your-element').addClass('your-class'); 
     break; 

    /* other cases here */ 

}

그해야 트릭하다 케이.

출처

2011-09-27 17:01:16

+1 점원 : –

더 나은 해결책은 페이지 당 CSS 파일을 스왑하는 대신 HTML 태그에 클래스를 설정하는 것입니다.

$("html").addClass(window.location.path.split(".")[0]);

다음 해당 클래스의 기반으로 사용자 정의 CSS 스타일이 있습니다 각 페이지 분할 확장이 있다면

html.home > .nav { background-color: blue; } 
html.about > .nav { background-color: green; } 
html.contact > .nav { background-color: red; }

이에만 작동 것, 즉이

이후입니다 당신은 jQuery없이 PHP를 사용할 수 있습니다 :

<html class="<?php $_SERVER['PHP_SELF'] ?>">

,이 같은 시도 할 수 있었다 그런 6,

이나 뭐, 내가 PHP에 대해 거의 알고 있지만 나는 그것이 비슷하거나 상황에서이

출처

2011-09-27 17:04:51 hunter

jQuery 또는 Javascript에서 현재 URL을 기반으로 CSS를 변경할 수 있습니까?

답변

관련 문제