javascript - 为什么 HTML anchor 不能更改 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>

这会将散列添加到您的 URL 和框的 ID，因此当您刷新时它也将起作用。