我使用以下代码在单击或切换到 div 时将焦点设置到它。
它只有在我点击 div 内的填充区域时才有效。
点击任何子元素都不会激活 div:focus。
请问我该如何解决这个问题?
CSS
.sidebar-message:link {
}
.sidebar-message:visited {
}
.sidebar-message:hover {
background-color: lightyellow !important;
outline-width: 0 !important;
}
.sidebar-message:focus {
background-color: khaki !important;
outline-width: 0 !important;
}
HTML
<div class="sidebar-message" tabindex="-1">
<a href="#" id="pending_{{id}}" data-id="{{id}}">
<div class="pull-left text-center">
<img alt="image" class="img-circle message-avatar" src="media/profile-pics/{{uid}}.jpg">
</div>
<div class="media-body">
<strong>{{{contact_name}}}</strong>
<span class="badge {{color}} pull-right{{hidden}}">{{unread}}</span>
<br>
<small class="text-muted">{{formatDate last_seen 'dddd, MMMM Do h:mm:ss a'}}</small>
<small class="pull-right">{{agent_name}}</small>
</div>
</a>
</div>
一些注意事项:
1) 有多个 .sidebar-message
行(DIV),一次只应突出显示一个
2) .sidebar-message
DIV 列表在@DocumentReady 中不可用,当 XHR 请求返回要通过 Handlebars 填充到模板中的数据时,它变得可用。其中一条评论建议后期绑定(bind)来解决这个问题
最佳答案
这将在任何子元素获得焦点时向容器添加一个新类。
注意:在这个例子中添加的类一旦设置就不会被删除。如果你想在用户点击其他地方时删除 focused
类,我建议你相应地为 focusout()
实现一个处理程序。
另一个注意事项:我建议再次调用容器元素上的 .focus()
(如其他两个答案中所建议的那样),因为这可能会从您的子元素中窃取焦点,这在turn 可能会影响可用性,尤其是当您计划向容器中添加输入元素时。
$(document).ready(function() {
// use the following line to bind a focus handler to existing elements:
// $(".sidebar-message *").on('focus', function() {
// use the following line for late binding (dynamically created elements):
$(document).on("focus", ".sidebar-message *", function() {
// remove class from all .sidebar-message elements
$(".sidebar-message").removeClass("focused");
// add class to nearest .sidebar-message element
$(this).closest(".sidebar-message").addClass("focused");
});
});
.sidebar-message:link {
}
.sidebar-message:visited {
}
.sidebar-message:hover {
background-color: lightyellow !important;
outline-width: 0 !important;
}
.focused.sidebar-message:hover,
.focused {
background-color: khaki !important;
outline-width: 0 !important;
}
.sidebar-message:focus {
background-color: khaki !important;
outline-width: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="sidebar-message" tabindex="-1">
<a href="#" id="pending_{{id}}" data-id="{{id}}">
<div class="pull-left text-center">
<img alt="image" class="img-circle message-avatar" src="media/profile-pics/{{uid}}.jpg">
</div>
<div class="media-body">
<strong>{{{contact_name}}}</strong>
<span class="badge {{color}} pull-right{{hidden}}">{{unread}}</span>
<br>
<small class="text-muted">{{formatDate last_seen 'dddd, MMMM Do h:mm:ss a'}}</small>
<small class="pull-right">{{agent_name}}</small>
</div>
</a>
</div>
<hr>
<div class="sidebar-message" tabindex="-1">
<a href="#" id="pending_{{id}}" data-id="{{id}}">
<div class="pull-left text-center">
<img alt="image" class="img-circle message-avatar" src="media/profile-pics/{{uid}}.jpg">
</div>
<div class="media-body">
<strong>{{{contact_name}}}</strong>
<span class="badge {{color}} pull-right{{hidden}}">{{unread}}</span>
<br>
<small class="text-muted">{{formatDate last_seen 'dddd, MMMM Do h:mm:ss a'}}</small>
<small class="pull-right">{{agent_name}}</small>
</div>
</a>
</div>
关于javascript - 单击任何内容元素时将焦点设置到 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37759244/