페이지 중간에있는 두 요소의 순서를 어떻게 바꿀 수 있습니까?

Question

나는 동적 인 웹 페이지를 가지고 있으며, 컨텐츠의 두 부분의 탭 순서를 재정렬해야한다. 이 모든 이전 요소에 대해 탭 인덱스를 설정하지 않으려 고합니다. DOM의 위치에 상대적으로 요소에 탭 인덱스를 할당 할 수 있습니까? 그러면 나머지 요소에 대한 자연 탭 순서를 유지할 수 있습니까?

다음 요소 보내기

<a>Link1</a> 
<a>Link2</a> 
<a>Link3</a> 
<a>Link4</a> 
<a>Link5</a> 

천연 탭 순서 여기서, 5가 1, 2, 3, 5의 탭 순서를 변경할 수있다 링크 1, 2, 3, 4, 1, 2 및 3의 탭 인덱스도 설정하지 않고 4?

실제 컨텍스트에서 확장 메뉴 다음에 두 요소를 다시 정렬해야하므로 탭 인덱스의 숫자 값을 알 수 없습니다.

javascript/jquery를 기반으로 한 솔루션도 환영합니다.

Answer 1

tabindex 스택을 변경하지 않고이 문제를 해결할 수 없습니다. 그러나 포커스를 가져 와서 다른 것으로 변경하는 작은 플러그인을 쉽게 작성할 수 있습니다. 그것은 지저분하지만, 나는 강력히 반대하고 싶습니다.

그러나 할 수있는 작업은 위와 아래의 tabindex-stack입니다. DOM의 이러한 항목 위에있는 모든 객체는 tabindex 10을 가질 수 있으며 아래의 모든 객체는 tabindex 30을 가질 수 있다고 가정합니다.

목록에있는 항목의 경우 탭 색인을 20에서 29 사이로 설정할 수 있습니다. 다음과 같이하십시오.

<div></div> 
<div></div> 
<div></div> 
<div></div> 

귀하의 범위 :

<a tabindex="20">Link1</a> 
<a tabindex="20">Link2</a> 
<a tabindex="20">Link3</a> 
<a tabindex="20">Link4</a> 
<a tabindex="20">Link5</a> 

에서 :

01,230,606 이상

이렇게하면 탭을 올바른 순서로 DOM을 통과하게됩니다. 그러나 길을 따라 untabindex'ed 오브젝트를 포함 시키면 첫 번째 블록과 동일한 탭 인덱스가 생성되어 이상하고 이상한 모든 것을 만듭니다.

<a tabindex="25">Link1</a> 
<a tabindex="24">Link2</a> 
<a tabindex="23">Link3</a> 
<a tabindex="22">Link4</a> 
<a tabindex="21">Link5</a> 

그것은 같은 지저분한 : 당신이 당신의 범위의 탭 인덱스를 전환하려면

, 당신은 '버퍼 범위'당신이 (예에서 20 ~ 29)이 내, 그에 따라 변경할 수 있습니다 지옥.

jQuery 옵션도 지저분하지만 더 깨끗하고 유지하기 쉽습니다.