jQuery的帖子UI选项卡与页面的锚链接正确

我使用的页面的锚引导用户从菜单特定标签。 然而,当你与标签点击链接不会重定向页面上。 它只是改变了URL的哈希。 任何想法,我怎么能解决这个问题?

例如链接

http://www.website.com/page#1

这是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); } }); });

--------------解决方案-------------

你需要听hashchange使用jQuery来检测哈希值发生变化时,这些变化不会触发页面加载事件。 看到这个答案的详细信息:在 - window.location.hash - 改变?

编辑-更多信息

正如上面链接中的回答说,这个作品以不同的方式不同的浏览器,最终你会得到从本Alman的剧本最好的结果(约瑟夫也低于提到)。 但是让我们把它分解。

下面是推散到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的插件,它略微变化,因为不是使用我们的代码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>

您应该使用本Alman的jQuery插件听哈希改变事件,因为它不是完全旧版浏览器的支持。

http://benalman.com/news/2010/01/jquery-bbq-v11-and-jquery-hashchange-event-v10/

案例分析:即使您手动轮询哈希,返回按钮将无法工作在IE6。 这是因为IE6不经hashchange推向一个新的历史状态。 Ben的插件需要照顾这个(由具有无形的iframe),以及更多的细微差别。

分类:jQuery的 时间:2015-03-15 人气:3
本文关键词: jQuery的,锚,jQuery UI的
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.406 (s). 10 q(s)