Question

我正在开发一个单页滑块，我对不同的内容使用不同的部分。我定位id以使滑块有效。在这种情况下，我需要更改地址栏url，其中包含我的内容id，但也不能更改hash。例如，它必须像www.mywebsite.com/home那样它应该定位到我的家庭部分。

我为fiddle提供了一个划痕以供更多参考

<div id="body">
<ul class="nav">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">about</a></li>
</ul>
<div class="home" id="home">Home Content</div>
<div class="about" id="about">About Content</div>

<a href="#body" class="top">Top</a>

提前致谢

Answer 1

您可以使用HTML5和pushState来实现

喜欢这个

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

有关信息，请参阅Manipulating_the_browser_history

Answer 2

使用此代码

$('a[href*=#]:not([href=#])').click(function () {
        alert(window.location.href);
     window.location.hash = $(this).attr('href'); // Updated answer Change URL ************ 
    alert(window.location.href);
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
            _nav = jQuery('header');
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(5) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top - _nav.height()
                }, 500);
                return false;
            }
        }
    });

您可以使用window.location.hash='yourText'

更新后的答案：有关动态网址的更改，您可以使用href

window.location.hash = $(this).attr('href');

Answer 3

您可以推进HTML5历史记录API： http://html5demos.com/history

如何更改单页滑块网站的网址

3 个答案: