javascript - 使用制表符 (HTML) 遍历子项

Question

让我们看一段这样的代码：

<article>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
</article>

我想<p>使用键迭代这些 -s ，并用 CSS（大纲或其他任何内容）tab标记当前选择的内容。<p>我试图添加tabindex到<p>-s，但它似乎不起作用。

我的问题是：

• 是否有可能以这种方式迭代非输入/链接元素？
• 如果可能，捕获当前元素的伪类是什么？
• 奖励：是否可以将迭代保持在<article>? 我希望迭代在最后一个之后跳到第<p>一个，反之亦然。

纯 HTML/CSS 解决方案会更好，但我也可以使用 JS。

标签： javascripthtmlcss

Answer 1

用于tabindex="0"和p在 css 中:focus使用 background:red;和 仅width:fit-content;适合内部backgroundtext

也用于 onmousedown="return false;"防止鼠标点击focus

p:focus{
background:red;
width:fit-content;
}

<article>
    <p onmousedown="return false;" tabindex="0">some text</p>
    <p onmousedown="return false;" tabindex="0">some text</p>
    <p onmousedown="return false;" tabindex="0">some text</p>
    <p onmousedown="return false;" tabindex="0">some text</p>
    <p onmousedown="return false;" tabindex="0">some text</p>
</article>