jQuery 锚点导航答案

【问题标题】：jQuery anchor navigationjQuery 锚点导航
【发布时间】：2012-06-11 03:17:48
【问题描述】：

我想使用 jQuery 构建一个基本的基于锚点的导航系统。我真的不想使用plugin like this 作为suggested here。任何人都可以帮助我了解构建这样一个系统的基本逻辑吗？

基本上我希望能够让一个页面通过如下链接提供多个 ajax 内容：

/myurl.html#state1
/myurl.html#state2

目前我只是绑定到链接的单击处理程序以打开对话框等。然后我可以将 URL 更改为/myurl.html#state1。问题是我是这样做的，还是只是让 <a> 标签本身指向该 url，然后使用 jQuery 来检测 URL 何时发生更改，这意味着它也可以在页面加载时工作？

任何建议/想法都会很棒 - 谢谢

【问题讨论】：

我知道你可能不想使用插件，但我发现 jquery-bbq 最适合这种功能benalman.com/projects/jquery-bbq-plugin
Sans 插件，这将是有用的yensdesign.com/2008/11/…
@Calum 我之前发现了烧烤，感谢您的建议，虽然它只是一页，所以插件似乎有点过头了。我之前也看到了 yendesign 的帖子，但我真的不喜欢设置计时器来检查更改的想法 - 似乎很浪费
@Chris，为什么要重新发明轮子？ BBQ 占地面积小，支持您似乎正在寻找的一切，而且开箱即用。
我想这样做有两个原因： 1. 这将进入一个嵌入式系统，其中外部插件的使用很难得到批准，并且占用空间是一个问题。 2.我想学:)

标签： javascript jquery navigation anchor

【解决方案1】：

<a href="#state1" rel="ajaxpage1.html"></a>
<a href="#state2" rel="ajaxpage2.html"></a>

$('a').each(function (i,obj){
   $(obj).click(function (){
       var url = $(obj).attr('rel');
       $..ajax({
          url: url,
          success: function (){...},
          error : function (){...}// incase you get a 404, or 500 and so on....
       });
   });
});

$(document).ready(function (){
   //if you need it on refresh, or if a user got the link from another page
   // it automatically will trigger the click therefore trigger the ajax
   if(window.location.hash != '#'){
      $('a[href="'+window.location.hash+'"]').click();
   }
});

我仍然认为你应该使用插件，因为它们有错误，并且可能已经修复了它们，所以你必须测试你的东西，浪费很多时间但你的电话:)

【讨论】：