javascript - 为什么 HTML 锚点不能更改 URL？

Question

我正在制作类似于旋转木马的滑动效果。我设置了四个盒子，每个盒子的内容都不一样，我用nav导航。

我发现每次刷新，页面都会回到第一个框。但我希望页面在刷新之前返回到框。此外，当我点击“a”标签时，“#box*”不会添加到 URL 中。如何解决？

<ul id="menu" class="nav nav-list span2">
    <li class="nav-header">nav</li>
    <li class="active">
        <a href="#box1" class="link">box1</a>
    </li>

    <li>
        <a href="#box2" class="link">box2</a>
    </li>

    <li>
        <a href="#box3" class="link">box3</a>
    </li>

    <li>
        <a href="#box4" class="link">box4</a>
    </li>
</ul>


<li id="box1" class="box">

    <div>XXXXX</div>
</li>

<li id="box2" class="box">

    <div>XXXXX</div>
</li>

JavaScript 代码

$('a.link').click(function(){
    $(this).parents("ul").children("li").removeClass("active");
    $(this).parents("li").addClass("active");
    $('#wrapper').scrollTo($(this).attr('href'), 800);
    return false;
});

Answer 1

您必须将 id="box1", id="box2", ... 添加到您希望浏览器跳转到的元素中。

例如：

<ul id="menu" class="nav nav-list span2">
    <li class="nav-header">nav</li>
    <li class="active">
        <a href="#box1" class="link">box1</a>
    </li>

    <a href="#box2" class="link">box2</a>

    <li>
        <a href="#box3" class="link">box3</a>
    </li>

    <li>
        <a href="#box4" class="link">box4</a>
    </li>
</ul>

<div id="box1">
    <h2>yo box1</h2>

    Put a lot of content here
</div>

<div id="box2">
    <h2>yo box2</h2>

    Put a lot of content here
</div>

这将使用框的 id 将哈希添加到您的 URL，因此当您刷新它时它也将起作用。

Answer 2

当您使用锚点 <a href="#box1"> 时，页面上必须有另一个具有“#box1”ID 的区域才能转到。如果您#在地址栏中没有看到任何内容，则说明您的 JavaScript 引起了问题。

示例：jsfiddle.net/dc5vq/1

代码：

<a href="#go1">go to 1</a><br><br>
<a href="#go2">go to 2</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><h1 id="go1">This is Go1</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1 id="go2">This is Go2</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Answer 3

消除

 return false;

从剧本。这会将#box* 添加到 URL。