小开

最佳答案

向 div元素添加 tabindex属性。

例如:

<div tabindex="1">First</div>
<div tabindex="2">Second</div>

根据 steveax 的注释，如果您不希望制表符顺序偏离页面中元素的位置，请将 tabindex设置为 0:

<div tabindex="0">First</div>
<div tabindex="0">Second</div>

小开

对于那些感兴趣的人，除了可以接受的答案之外，您还可以添加以下 jquery，以便在选项卡中更改 div 样式，还可以处理 Enter 和 Space 以触发单击(然后您的单击处理程序将执行其余操作)

$(document).on('focus', '.button',function(){
$(this).css('border','1px dotted black')
});
$(document).on('keyup', '.button',function(e){
if(e.which==13 || e.which==32)
$(this).click()
});

I'm sure someone has made this into a jq plugin $().makeTabStop

小开

将 tabindex="0"属性添加到所需的每个 div 表中。然后使用 CSS 伪类: hover 和: focus，例如，向应用程序用户表明 div 处于焦点并且可以单击。使用 JavaScript 处理单击。

var doc = document;
var providers = doc.getElementsByClassName("provider");


for (var i = 0; i < providers.length; i++) {
providers[i].onclick = function() {
console.log(this.innerHTML);
};
}

.provider {
flex: 0 1 auto;
align-self: auto;
width: 256px;
height: 48px;
margin-top: 12px;
margin-right: 12px;
text-align: center;
line-height: 48px;
    

text-transform: uppercase;
background-size: contain;
background-repeat: no-repeat;
background-position: 10%;
background-color: gray;
}


.provider:hover{
cursor: pointer;
}


.provider:focus{
-webkit-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
}

<h4>Click in this area first then press tab</h4>
<div id="email" class="provider" tabindex="0">email</div>
<div id="facebook" class="provider" tabindex="0">facebook</div>
<div id="github" class="provider" tabindex="0">github</div>
<div id="google" class="provider" tabindex="0">google</div>
<div id="twitter" class="provider" tabindex="0">twitter</div>

小开

使用 jquery 通过按键使元素可以制表和单击

假设

所有属于不可表、不可点击类型且应该可点击的元素都有一个点击属性(这可以更改为类或其他属性)
所有元素都属于同一类型; 我将使用 div。
你用的是 jquery

示例 html:

...


<div onclick="clicked(this)">Button 1</div>
<div onclick="clicked(this)">Button 2</div>
<div onclick="clicked(this)">Button 3</div>


...

Jquery code: 这是页面加载后将运行的代码。它需要在 HTML 页面上运行。

$(()=>{
// make divs with an onclick attribute tabbable/clickable
$('div[onclick]')
.attr('tabindex', '0')                     // Add tab indexes
.keypress((evt)=>{
var key = evt.key;
evt.preventDefault();                  // Ensure all default keypress
// actions are not used
if (key === ' ' || key === 'Enter') {  // Only send click events for Space
// or Enter keys
evt.currentTarget.click();         // Run the click event for element
}
});
});

您可以找到一个工作示例给你。

小开

对于任何出现在这个页面上的意图相反，因为在使一个 div 标签不表格: https://github.com/WICG/inert是一个很好的方式。

如何制作一个 div“ Tabtable”？

使用 jquery 通过按键使元素可以制表和单击