我试图使用jquery.focus()将焦点设置在带有类的div上，它在IE 9中有效，但在firefox或chrome中无效。
window.setTimeout(function(){ searchDivToggle(); $('.searchResultsFieldSet').focus();},0);
页面有搜索表单，包含搜索结果的表格，每行都有一个查看详细信息的链接，点击链接显示详细信息div隐藏搜索表单和表格，详细信息div关闭点击隐藏详细信息显示搜索和搜索结果。
html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function showDetails(){
$('#search').toggle();
$('#detailsFragment').css("display","block");
}
function hideDetails(){
$('#search').toggle();
$('#detailsFragment').css("display","none");
$('#searchResults').focus();
}
</script>
</head>
<body>
<div id="search">
<div style="height:50em; width=30em; border-width: 1px; border-style: dotted; padding-bottom: 1em; padding-top: 1em; padding-left: 1em; padding-right: 1em ">
Place hodler for search form........
</div>
<div style="border-width: 1px; border-style: dotted; padding-bottom: 1em; padding-top: 1em; padding-left: 1em; padding-right: 1em ">
<label style=" font-weight: bold;" >Search Results </label>
<table id="searchResults">
<thead>
<td>column1</td>
<td>column2</td>
<td>Action</td>
</thead
<tbody>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="detailsFragment" style="display:none">
<div style="height:50em; width=30em; border-width: 1px; border-style: dotted; padding-bottom: 1em; padding-top: 1em; padding-left: 1em; padding-right: 1em ">
Details Fragment
<input type="button" value="Close" onclick="hideDetails();">
</div>
</div>
</body>
最佳答案
focus() 不能放置在 table 元素上。它需要放置在 input、textarea 或 select
The focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (, , etc.) and links (). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.
您可能想要使用 scrollTo() 元素函数。这里有一个例子:
jQuery scroll to element
关于javascript - focus() 在 IE 9 中有效，但在 chrome、firefox 中无效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25406055/