如何将焦点环添加到 html 中的菜单项

Question

Is this even possible if I have a menu item such as below?

<li class="dropdown"><a <">data-</c:if>href="url"?
                    class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"><fmt:message

Answer 1

It sounds like you want to use tabindex :

 <ol> <li tabindex="-1">Item 1</li> <li tabindex="-1">Item 2</li> <li tabindex="-1">Item 3</li> <li tabindex="-1">Item 4</li> <li tabindex="-1">Item 5</li> <ol>

Note that this isn't the most accessible way of doing things, so if what you really want is to outline an <li> when a link inside it has focus, you can use this CSS (try tabbing through the example below):

 li:focus-within { outline: 1px solid blue; } li a { outline: none; }

 <ol> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> <ol>