jQuery Post UI选项卡无法与页面锚正确链接 [英] Jquery Post UI Tabs not linking properly with page-anchors
问题描述
我正在使用页面锚将用户从菜单定向到特定选项卡.但是，当您在带有选项卡的页面上时，单击链接不会重定向.它只是更改URL中的哈希值.知道我该如何解决吗?
I'm using page-anchors to direct users to particular tabs from a menu. However when you're on the page with the tabs clicking the link doesn't redirect. It simply changes the hash in the URL. Any idea how I could resolve this?
示例链接
这是WordPress顺便说一句.
This is on WordPress btw.
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事件，以检测哈希值何时更改，因为这些更改不会触发页面加载.有关详细信息，请参见以下答案:在-window.location.hash-更改?
You need to listen to the hashchange event using jquery to detect when the hash changes, as these changes do not trigger a page load. See this answer for details: On - window.location.hash - Change?
编辑-更多信息
正如上面链接中的答案所述，这对于不同的浏览器来说是不同的，最终您将从Ben Alman的脚本中获得最好的结果(正如Joseph也在下面提到的那样).但让我们分解一下.
As the answer in the link above says, this works differently for different browsers, and ultimately you will get the best results from Ben Alman's script (as Joseph also mentions below). But lets break it down.
这是一个简单的示例，将哈希值推入h1标签:
Here is a simple example that pushes the hash into an h1 tag:
<!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中创建新的历史记录条目.用户交互导致的哈希更改会很好地创建历史记录条目.
This example will work in most modern browsers, including IE8, with the caveat that just changing the hash in the URL will not create a new history entry in IE. Hash changes caused by user interaction will create history entries just fine.
If you intend to support IE7 and below then the best approach is to use Ben's plugin, which changes our code slightly because instead of using bind to listen to the event you subscribe to the event function created by the plugin:
<!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选项卡无法与页面锚正确链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
