Question

我正在使用页面锚点将用户从菜单引导到特定标签。但是，如果您在页面上显示选项卡，则单击该链接不会重定向。它只是更改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);
    }
    });
});

Answer 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>

Answer 2

您应该使用Ben Alman的jQuery插件来收听哈希更改事件，因为旧浏览器并不完全支持它。

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

例证：即使你手动轮询哈希，后退按钮也不会在IE6中工作。那是因为IE6不会在hashchange上推送新的历史状态。 Ben的插件负责处理（通过隐藏的iframe）以及更多细微差别。

Jquery Post UI选项卡未正确链接到页面锚点

2 个答案: