2

我正在构建一个基本站点，用户单击一个链接，Jquery 通过对服务器的异步请求使用 Jquery 的 load() 填充一个 id="article" 的 div。这是html：

<a href="#targetpage.html" onclick="menu('targetpage.html');"> TARGET PAGE</a>

这调用了这个非常简单的函数：

var menu = function(page){ $('#article').load(page); //other code };

它工作正常。

但是，我希望用户能够使用永久链接， www.mysite.com/index.html#targetpage.html并且我希望 js 能够读取 URL 中的哈希值并相应地填充 div。

问题是，当我尝试将值 window.location.hash 传递给函数时（加载或就绪状态），一切都卡住了，我的 js 不再工作了。我也尝试使用 ajax() 而不是 load() 函数，但它也不接受该值。

编辑 如果我尝试

var thispage = document.location.hash;
var hash = thispage.replace( /^#/, '' );

并输入 mysite.com/#page_one.html，警报显示：

page_one.html,

这很好！但是之后

menu(hash);

不会将 page_one.html 的内容加载到 div 中。但是，单击我的菜单可以正常工作。在 js 控制台中，我没有任何错误或警告。这是涉及的整个代码：

<head><script type="text/javascript" charset="iso-8859-1">
var thispage = document.location.hash;
var hash = thispage.replace( /^#/, '' );
alert(hash);
menu = function(page){
    $('#article').load(page);
    };
menu(hash);
</script>
</head>
<body>
<div id="menu">
<ul>
<li><p class="menuvoice">
        <a href="#page_one.html" onclick="menu('page_one.html');">
            Page One</a></p></li>
<li><p class="menuvoice">
        <a href="#page_two.html" onclick="menu('page_two.html');">
            Page Two</a></p></li>
</ul>
</div>
<div id="article"></div>
4

3 回答 3

1

使用 jQuery hashchange 插件怎么样？

http://benalman.com/projects/jquery-hashchange-plugin/

当它改变时（即当你点击一个链接或用新的散列重新加载页面时）它会处理解析你当前散列的工作。

编辑。示例用法：

$(function(){
  // Bind an event to window.onhashchange that, when the hash changes, gets the
  // hash and adds the class "selected" to any matching nav link.
  $(window).hashchange( function(){
    var hash = location.hash;

    // Set the page title based on the hash.
    document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';

    // Iterate over all nav links, setting the "selected" class as-appropriate.
    $('#nav a').each(function(){
      var that = $(this);
      that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
    });
  })

  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).hashchange();
});
于 2012-04-25T08:25:42.740 回答
1

您的控制台中是否有任何错误输出？这将有助于识别问题。

您可以尝试在将检索到的哈希值发送到您的“菜单”函数之前提醒它，这样您就会知道它是否正确（我想知道 # 符号是否未附加到哈希上，我想这会在您的情况下造成问题)

于 2012-04-25T08:30:43.673 回答
1

试试这个：

var hash = window.location.hash;
if (hash) {
  var hash = hash.replace(/#/, '');
  // Your function using hash
}
于 2012-04-25T08:31:55.457 回答