如何使用 JavaScript
或 jQuery
将焦点设置在第一个 li
上?
我是初学者。
代码:
$('ul li').each(function() {
if ($(this).find('a').length > 0) {
$(this).find('a').css('color', 'red');
$(this).find('a').focus()
return false;
}
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="dfruits" class="sinline">
<li><p class="StockBez">ROBO</p></li>
<li><p class="StockBez">SQ</p></li>
<li><p class="StockBez">NVDA</p></li>
</ul>
最佳答案
除非设置了 tabindex
,否则不能将 focus
放在 li
元素上,因为默认情况下它不是可聚焦的元素。如果你设置了它的tabindex
,那么你可以使用:
/* Put focus on the first li element. */
$("#dfruits > li").first().focus();
片段:
/* ----- JavaScript ----- */
$("#dfruits > li").first().focus();
<!----- HTML ----->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="dfruits" class="sinline">
<li tabindex="-1">
<p class="StockBez">ROBO</p>
</li>
<li tabindex="-1">
<p class="StockBez">SQ</p>
</li>
<li tabindex="-1">
<p class="StockBez">NVDA</p>
</li>
</ul>
注释:
在上面的
HTML
代码中,我将每个li
元素的tabindex
设置为-1
。这意味着li
元素只能通过JavaScript
以编程方式获得焦点,而不能通过点击tab
键。如果您的
HTML
有任何实际的 anchor 元素,正如您提供的JavaScript
代码所暗示的那样,您可以使用$("#dfruits a ").first().focus();
将焦点设置为此类元素,无需使用tabindex
,前提是它们设置了href
属性。如果您注重代码的速度,最好使用
$("#dfruits").find("li")
而不是$("#dfruits > li")
,因为Sizzle
引擎尝试从右到左匹配选择器(@Mark Schultheiss ' 注释)。
关于javascript - 如何使用 javascript 或 jquery 将焦点设置在第一个 LI 上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47954110/