Question

当我尝试使用下面的行聚焦p标签时，它没有被突出显示。有人可以帮我突出显示吗？

$("#tabFocus").focus();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Search icon on a styled button:
  <button type="button" class="btn btn-info">
    <span class="glyphicon glyphicon-search"></span> Search
  </button>
</p>
<p id="tabFocus">
  Print icon: <i class="glyphicon glyphicon-print"></i>
</p>

Answer 1

要使p元素（或a或表单控件以外的任何其他元素）获得焦点，您需要在其上放置一个tabindex属性。然后，您可以使用:focus选择器设置样式，以实现“突出显示”效果：

$("#tabFocus").focus();

p:focus {
  color: #C00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Search icon on a styled button:
  <button type="button" class="btn btn-info">
    <span class="glyphicon glyphicon-search"></span> Search
  </button>
</p>
<p id="tabFocus" tabindex="0">
  Print icon: <i class="glyphicon glyphicon-print"></i>
</p>

请注意，添加多余的tabindex属性可能会对使用键盘浏览您的网站的用户的UX产生负面影响。

.focus（）无法通过jquery处理'p'标签

1 个答案: