Flexbox的順序和Tab鍵導航

我想用顯示：彎曲與線類改變的div的順序，但我想保持這樣的標籤導航順序：A→B→C→ D.Flexbox的順序和Tab鍵導航

正如你可以在片段中看到的，第一個例子工作正常（DOM序列與Order相同），但在第二個例子中，該選項卡遵循DOM序列。

沒有使用javascript的機會？

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.line { 
 
    padding: 5px; 
 
    border: 1px solid gray; 
 
    margin-bottom: 5px; 
 
} 
 

 
.line span { 
 
    margin-left: 7px; 
 
}

<h2> 
 
    Tabbing navigation OK 
 
</h2> 
 
<div class="container"> 
 
    <div class="line" style="order: 1;"><input value="A"><span>1st div - Order: 1</span></div> 
 
    <div class="line" style="order: 2;"><input value="B"><span>2nd div - Order: 2</span></div> 
 
    <div class="line" style="order: 3;"><input value="C"><span>3rd div - Order: 3</span></div> 
 
    <div class="line" style="order: 4;"><input value="D"><span>4th div - Order: 4</span></div> 
 
</div> 
 

 
<h2> 
 
    Tabbing navigation KO 
 
</h2> 
 
<div class="container"> 
 
    <div class="line" style="order: 1;"><input value="A"><span>1st div - Order: 1</span></div> 
 
    <div class="line" style="order: 4;"><input value="C"><span>2nd div - Order: 4</span></div> 
 
    <div class="line" style="order: 3;"><input value="C"><span>3rd div - Order: 3</span></div> 
 
    <div class="line" style="order: 2;"><input value="B"><span>4th div - Order: 2</span></div> 
 
</div>

的jsfiddle鏈接here。

在此先感謝

來源

2017-06-01 Alex

我能想到的唯一方法就是使用'tabindex'。 –

可以使用tabindex HTML屬性

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.line { 
 
    padding: 5px; 
 
    border: 1px solid gray; 
 
    margin-bottom: 5px; 
 
} 
 

 
.line span { 
 
    margin-left: 7px; 
 
}

<h2> 
 
    Tabbing navigation OK 
 
</h2> 
 
<div class="container"> 
 
    <div class="line" style="order: 1;"><input value="A"><span>1st div - Order: 1</span></div> 
 
    <div class="line" style="order: 2;"><input value="B"><span>2nd div - Order: 2</span></div> 
 
    <div class="line" style="order: 3;"><input value="C"><span>3rd div - Order: 3</span></div> 
 
    <div class="line" style="order: 4;"><input value="D"><span>4th div - Order: 4</span></div> 
 
</div> 
 

 
<h2> 
 
    Tabbing navigation KO 
 
</h2> 
 
<div class="container"> 
 
    <div class="line" style="order: 1;"><input value="A" tabindex="1"><span>1st div - Order: 1</span></div> 
 
    <div class="line" style="order: 4;"><input value="C" tabindex="4"><span>2nd div - Order: 4</span></div> 
 
    <div class="line" style="order: 3;"><input value="C" tabindex="3"><span>3rd div - Order: 3</span></div> 
 
    <div class="line" style="order: 2;"><input value="B" tabindex="2"><span>4th div - Order: 2</span></div> 
 
</div>

來源

2017-06-01 13:41:01

謝謝你的回覆。我正在尋找一些沒有使用tabindex的東西，但似乎是必要的... – Alex

@Alex很確定這是唯一的方法，如果你不想使用JS。 CSS僅用於顯示，所以你不能用CSS來完成。 tabindex有什麼問題？ –

在每個div.line中的實際情況中，有很多元素，不僅僅是這個示例中的輸入，而且我也不會將我們綁定到tabindex。但我也認爲這是唯一的方法...... :)謝謝！ – Alex