jQuery는 페이지 URL을 기반으로 클래스를 추가합니다.

나는 무엇을 가지고 있습니까 은 간단한 질문이지만 그것이 저의 삶에서 작동하도록 할 수는 없습니다.jQuery는 페이지 URL을 기반으로 클래스를 추가합니다.

URL에 기반한 기본 페이지 컨테이너에 클래스를 추가하는 페이지에 자바 스크립트를 추가하고 싶습니다.

의 내가 root.com에서 사이트 (느슨하게 말하기) 다음과 같은 HTML 구조 있다고 가정 해 봅시다 : 내가하고 싶은 것은 스크립트가

<html> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    </head> 
    <body> 
    <div id="main" class="wrapper"> 
     Blah, blah, blah 
    </body> 
</html>

을 그 페이지 = (예를 들어) 루트 경우 .com/technology를 사용하면 기본 div에 클래스가 추가됩니다. 따라서 div는 다음과 같이 나타납니다.

 <div id="main" class="wrapper tech">

jquery가로드되어 있으므로 그렇게하고 싶습니다.

출처

2012-04-02 Matt Martin

당신은 사용할 수 있습니다 (에서는 window.location)

, 위치 개체에 관한 정보의 당신이 할 수있는 자산 재산

CONSOLE.LOG을 수행하여, 다른 답변에 따라 window.location을 사용하여 현재 URL을 얻은 다음이를 기반으로 전환하십시오.
$(function() { 
    var loc = window.location.href; // returns the full URL 
    if(/technology/.test(loc)) { 
    $('#main').addClass('tech'); 
    } 
}); 
정규식을 사용하여 URL에 특정 구문 (특히 : technology)이 포함되어 있는지 확인한 다음 #main 요소에 클래스를 추가합니다.
switch (window.location.pathname) { 
    case '/technology': 
     $('#main').addClass('tech') 
    case '/something': 
    case '/somestuff': 
     $('#main').addClass('some') 
} 
이 방법, 당신은 깨끗한 코드를 유지하고 당신은 쉽게 다른 경우를 추가 할 수 있습니다

출처

2012-04-02 20:13:46

이것은 작동합니다. 감사. –

우수 작품은 아주 좋습니다. – 422

@alex vidal 잘 작동하지만 정상보다 조금 늦게로드됩니다. 사용자가 결정되면 하위 메뉴를 열어두기 위해이 동작을 사용합니다. 따라서 사용자는 하위 카테고리 메뉴가 열리는 방법을 1-2 초 후에 볼 수 있습니다. 나는 이것을 즉시하고 싶습니다. 어떻게 이것을 피할 수 있습니까? –

전체 URL 또는 일부를 확인하려면 location 내장 개체를 사용하십시오.

출처

2012-04-02 20:09:35 kirilloid

분명히 이것은 맞지만, 어떻게 해야할지에 대한 나의 질문에 완전히 답하지는 못합니다. –

아래와 같은 내용을 원하십니까? 단지

 if(window.location.href=== "root.com/technology") { 
     $("#main").addClass("tech"); 
    }

출처

2012-04-02 20:11:58 DG3

음, 여기에 내가 어떻게 할 것입니다.

here을 참조하십시오. window.location.pathname을 의미합니다.

출처

2012-04-02 21:05:54

당신이 말했듯이, 당신은 쉽게 물건을 조장하지 않고도 다른 케이스를 쉽게 추가 할 수 있기 때문에 나는 이것을 좋아한다. 그러나 나는 그것을 작동시킬 수 없습니다 ... –

나는이 답변을 선택한 다음 '최고의'답변을 더 좋아합니다. 스위치 문은 더 깨끗한 다음 조건문을 작성합니다. – IE5Master

jQuery는 페이지 URL을 기반으로 클래스를 추가합니다.

답변

관련 문제