하이라이트 탭이있는 요소 (jQuery/CSS/anything 사용)

Question

페이지의 탭을 테스트하려고하는데 탭으로 표시된 부분을 볼 수 없습니다.

필자는 입력 요소 유형 텍스트와 텍스트 영역을 매우 쉽게 강조 표시했습니다. 라디오가 작동하지 않았지만 부모 요소에 영향을 미쳤습니다. 여기 내 jQuery의 :

$(":input").focusin(function() { 
    if($(this).attr('type') === 'radio') { 
     $(this).parent().attr('style', 'background-color: yellow !important'); 
    } else { 
     $(this).attr('style', 'background-color: yellow !important'); 
    } 
}); 
$(":input").focusout(function() { 
    if($(this).attr('type') === 'radio') { 
     $(this).parent().css('background-color',''); 
    } else { 
     $(this).css('background-color',''); 
    } 
}); 

하지만 지금은 아직도 내가로 탭 이동하고있어 다른 요소를 가지고 있고 심지어 그들이 무엇인지 말할 수 없다. 내가 아는 것 중 하나는 마지막 라디오 그룹에서 다음 "select"엘리먼트 (몇개의 jquery 코드 없이도 포커스가 맞음)로 이동하기 위해 탭을 몇 번 누르는 것입니다. 그 후에는 강조하고 싶은 버튼도 있습니다.

모든 단일 요소에 대한 조건을 나열해야합니까? 또는 $(":input,:button,[etc]")과 같은 선택기를 사용 하시겠습니까? 어떤 부분이든간에 요소를 가질 수있는 쉬운 방법이 있습니까?

Answer 1

HTML 태그에 tabindex 속성을 사용할 수 있습니다. What is the HTML TabIndex

Answer 2

당신은 CSS에서 :focus 의사 클래스를 사용할 수 있습니다 : 는 여기에 SO 질문이다. Internet Explorer 7 이상을 제외하고는 잘 supported입니다. 그들을 지원해야 할 경우 Selectivzr과 같은 polyfill을 사용하십시오. 그러나 :focus은 포커스 도달 방법에 관계없이 포커스가있는 요소 (예 : 탭 이동, 클릭 또는 focus() 메소드 호출)에 관계없이 포커스가있는 요소와 일치합니다.

예 :

<style> 
 
    :focus { outline: solid red } 
 
</style> 
 
<p><input placeholder="Click me, then tab"> 
 
<p><input type=radio> 
 
<p><a href="https://developer.mozilla.org">link</a> 
 
<p contenteditable=true>This is editable and focusable