我使用页面 anchor 将用户引导至菜单中的特定选项卡。但是，当您进入带有选项卡的页面时，单击链接不会重定向。它只是更改 URL 中的哈希值。知道如何解决这个问题吗？
示例链接
顺便说一句，这是在 WordPress 上。
jQuery(document).ready(function($){
$(function() {
$( "#tabs" ).tabs();
if(document.location.hash!='') {
//get the index from URL hash
tabSelect = document.location.hash.substr(1,document.location.hash.length);
$("#tabs").tabs('select',tabSelect-1);
}
});
});
最佳答案
您需要使用 jquery 监听 hashchange 事件来检测哈希何时更改，因为这些更改不会触发页面加载。有关详细信息，请参阅此答案:On - window.location.hash - Change?
编辑 - 更多信息
正如上面链接中的答案所说，这对于不同的浏览器有不同的工作方式，最终您将从 Ben Alman 的脚本中获得最佳结果(正如 Joseph 在下面提到的那样)。但让我们把它分解一下。
这是一个将哈希值推送到 h1 标记的简单示例:
<!DOCTYPE html>
<html>
<head>
<title>Hash Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
function getHash() {
return document.location.hash.substr(1);
}
$(document).ready(function() {
if(document.location.hash != '') {
$('#sectionName').html(getHash());
}
$(window).bind('hashchange', function() {
$('#sectionName').html(getHash());
});
});
</script>
</head>
<body>
<h1 id="sectionName"></h1>
<a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a>
</body>
</html>
此示例适用于大多数现代浏览器，包括 IE8，但需要注意的是，仅更改 URL 中的哈希值不会在 IE 中创建新的历史记录条目。由用户交互引起的哈希更改将很好地创建历史条目。
如果您打算支持 IE7 及更低版本，那么最好的方法是使用 Ben's plugin ，这稍微改变了我们的代码，因为您订阅了插件创建的事件函数，而不是使用 bind 来监听事件:
<!DOCTYPE html>
<html>
<head>
<title>Hash Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.ba-hashchange.min.js"></script>
<script type="text/javascript">
function getHash() {
return document.location.hash.substr(1);
}
$(document).ready(function() {
$(window).hashchange(function() {
$('#sectionName').html(getHash());
});
//trigger the change for a hash set at page load
if(document.location.hash != '') {
$(window).hashchange();
}
});
</script>
</head>
<body>
<h1 id="sectionName"></h1>
<a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a>
</body>
</html>
关于Jquery Post UI 选项卡未与页面 anchor 正确链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6934875/