Question

我正在制作类似于旋转木马的滑动效果，我设置了四个盒子，每个盒子的内容不同，我使用导航来导航。我发现每次刷新时，页面都会返回第一个框。但我希望页面在刷新之前返回到框中。此外，当我点击“a”标签时，“＃box *”将不会添加到网址中。怎么解决这个问题？有人可以帮助我吗？非常感谢你！我很抱歉我的英语很差

    <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>

javascipt code

$('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 here a lot of content
</div>
<div id="box2">
    <h2>yo box2</h2>
            Put here a lot of content
</div>

编辑：这会使用框的ID将哈希添加到您的网址，因此刷新时也会有效。

Answer 2

当您使用锚时，页面上必须有另一个具有“＃box1”ID的区域。如果你在地址栏中没有看到任何＃，那么你的JS就会出现问题。

示例：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 *添加到网址

Html锚点无法更改网址？

3 个答案:

代码：