: 대상의 선택은 여기에

작동하지 않습니다 내 마크 업입니다 :: 대상의 선택은 여기에

<p>A paragraph with <a id="link" href="#link">a link</a> inside it.</p>

여기

내 jQuery를이 :

$("a:target").css("font-size","2em");

내가 링크, http://example.com/file.html#link에 URL 변경을 클릭

. 그러나 font-size은 증가하지 않습니다. 직접로드해도 font-size에 변경 사항이 없습니다 http://example.com/file.html#link

선택기가 작동하지 않는 이유는 무엇입니까?

업데이트 : :target 선택기를 사용해야합니다. 선택의 여지가 없습니다.

출처

2016-06-05 SanJeet Singh

그 페이지에서 'ID ='link'' 어떤 목표를 볼 수 없습니다. 그리고': target' 셀렉터는 타겟으로 리다이렉트하는 링크가 아닌 *** target *** 엘리먼트를 선택합니다. – Harry

@Harry 이는 실제 페이지가 아니라 예제 페이지입니다. ": target"선택자가 타겟으로 리다이렉트하는 링크가 아니라 타겟 엘리먼트를 선택할 것임을 의미 하는지를 상세히 설명해 주시겠습니까? " –

'href = '# link''로'a'를 넣으면 URL은'http : // yoursite.com/# link'처럼 보일 것입니다. 링크가 yoursite.com으로 리다이렉트하고 그 엘레멘트를 타깃으로 함을 의미합니다 귀하의 페이지에서'id = 'link''. 어떤 요소 ('p' 또는'div' 또는 무엇이든)가 될 수 있습니다. 'id = 'link' '를 가진 요소가'p'라고 말하면,': target' 셀렉터는 현재 타겟 인'p' 요소를 목표로합니다. – Harry

앵커를 클릭 한 직후 :target 선택기를 사용하는 것이 문제입니다. 앵커를 클릭하면 브라우저가 대상 요소에 집중하지 않는 반면 javascript는 선택기를 즉시 실행합니다. 코드를 잠시 멈추고 :target 셀렉터를 실행해야합니다.

$("a").click(function(){ 
 
    setTimeout(function(){ 
 
     $("a:target").css("font-size","2em"); 
 
    }, 1); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
    A paragraph with 
 
    <a id="link" href="#link">a link</a> 
 
    inside it. 
 
</p>

출처

2016-06-05 06:56:32 Mohammad

Thanks @Mohammad. 직접로드 할 때 코드가 작동하지 않는 이유는 무엇입니까? http://example.com/file.html#link –

@SanJeetSingh 마우스를 클릭 할 때 CSS를 추가했기 때문입니다. – Mohammad

아니요, 아닙니다. 내 코드에는'click' 함수가 없습니다. 스크립트 태그 안에'$ ("a : target"). css ("font-size", "2em")'를 직접 써주세요 : –

: 대상의 선택은 여기에

답변

관련 문제