Question

我希望我能得到一些history.js插件的帮助。我已经尝试了很多关于stackoverflow和github的例子，试图让它工作但不能为我的生活..

我想要实现的目标：

我有一个文章列表，其中包含用于搜索引擎优化目的的href链接和页面的ajax版本的数据属性（如果我可以使用link = canonical，这是否必要？）
当我点击文章时，div会向上滑动并将内容加载到其中
网址更新为“example.com/article/this-is-the-article-name”或文章名称恰好是什么，因此用户可以在没有重新加载页面的文章之间返回
如果只访问了example.com，则面板消失以及内容

我输出的HTML：

<a href="http://example.com/article/this-is-the-article-name" data-href="http://example.com/article/ajax/this-is-the-article-name" class="ajax-click"></a>

<div id="panel" class="hidden"></div>

我试过的javascript：

$(document).ready(function(){
var History = window.History,
State = History.getState();

// not sure if this was doing anything to prevent clicks $('.ajax-click')[0].onclick = null;
$('.ajax-click').live('click', function(e) {
    e.preventDefault();
    var path = $(this).attr('data-href');
    var title = $(this).attr('title');
    History.pushState('ajax',title,path);
            if ($('#panel').hasClass('hidden')) {
          $('#panel').slideToggle(500);
          $('.header').slideToggle(600);
    }
});

// Bind to state change
// When the statechange happens, load the appropriate url via ajax
History.Adapter.bind(window,'statechange',function() { // Note: Using statechange instead of popstate
load_ajax_data();
});

function load_ajax_data() {
 State = History.getState();   
 $.post(State.url, function(data) {
    $("#panel").html(data);
    });

 }
});

我有上面的jQuery库和捆绑的html4 + 5历史插件。我想知道是因为我输出的是完整的网址，而不是像“/ article / article-name”那样可能会导致问题。

任何帮助都会受到高度赞赏，即使它只是其中的一部分。谢谢！

无法获得history.js工作

0 个答案: