Question

对于我的单页网站，我有一个项目索引。如果单击某个项目，则会在同一页面上打开幻灯片。基本上，我只有一个URL，如果有人想要链接到特定的项目，他们就不能。

我正在尝试这样做，如果我点击一个项目，它会更改URL。因此，URL可以用于打开该项目的网站。

Here是我到目前为止的链接。

作为参考，我正在努力实现在site上找到的东西。

我发现了一些很好的建议here，但是当我使用类似这样的内容（下面）时会发生什么，创建了一个新的URL，但如果我将该URL租借到浏览器中，它就不会打开项目。

<a href="#" id='click'>Click to change url to bar.html</a>

<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

Answer 1

function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

您可以使用`window.onpopstate来感知后退/前进按钮导航

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

我希望有更多技能的人为我检查一下

Answer 2

您可以将id用于具有幻灯片显示作为唯一网址的元素;在.ready()处开始id匹配.location.hash

的元素的动画

$().ready(function() {
  // `location.hash`: `id`: `#slideshow1` of element linked to
  // from, e.g., `http://example.com/#slideshow1`
  var currentSlideshow = $(location.hash);
  // do slideshow stuff at `currentSlideshow`: `#slideshow1` element
})

Answer 3

在这种情况下，

使用哈希可能效果最好

$(document).ready(function({

    //loading a page
    var project = window.location.hash 
    yourProjectLoadFunction(project);        

    //setting a url
    $('.number').click(function(e){ 
        $this = $(this);
        window.location.hash = $this.attr('id');
    });
});

更改网址而不加载新网页

3 个答案: