Question

在执行javascript函数后，网页返回到页面顶部时出现了一个小问题。

基本上，我有一个小的javascript函数，通过改变它的显示风格来切换div的可见性。代码如下：

<script type="text/javascript">
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

然后我用一个看起来像这样的链接来调用它：

<a href="#" onclick="toggle_visibility('001');" class="expand">[+/-] Hide/Show Info</a>

并且div看起来像这样：

<div id="001" style="display:none;">
hello world
</div>

这很好用。但当我点击我的＆＃34;展开/隐藏＆＃34;链接以切换div的可见性，页面始终返回到顶部，因此我每次都必须向下滚动到底部。

我尝试在javascript函数的末尾添加以下更改，但它们都不起作用：

window.location = 'test.php#' + id; //where test.php is my current page

和

window.location.hash=id;

在解决此问题时，我们将不胜感激谢谢。

Answer 1

建议不要重载链接，而是使用span：

Live Demo

<style>
.expand { cursor:pointer; }
</style>

<span data-div="x001" 
 class="expand">[+/-] Hide/Show Info</a>

我强烈建议

不使用数字ID
不使用内联事件处理程序

所以

window.onload=function() {
  var links = document.querySelectorAll(".expand");
  for (var i=0;i<links.length;i++) {
    links[i].onclick=function(e) {
      e.preventDefault();  
      var ele = document.getElementById(this.getAttribute("data-div"));
      if (ele) ele.style.display = ele.style.display == "block"?"none":"block";
    }
  }
}

使用

<div id="x001">...</div>

使用链接，您可以使用页面作为href来告诉用户启用JS或承担后果：）

<a href="pleaseenablejs.html" data-div="x001" 
 class="expand">[+/-] Hide/Show Info</a>

要修复您的代码，您需要返回false。在较新的浏览器中，使用event.preventDefault

function toggle_visibility(id) {
   var elm = document.getElementById(id);
   elm.style.display = elm.style.display == "block"?"none":"block";
   return false;
}

使用

<a href="#" onclick="return toggle_visibility('001');" 
 class="expand">[+/-] Hide/Show Info</a>

Answer 2

使用

<a href="javascript:void(0)" onclick="toggle_visibility('001');" class="expand">[+/-] Hide/Show Info</a>

Answer 3

点击事件后，您的链接会将网址重定向到“＃”，因为您没有停止事件传播。

您可以通过更改href javascript:void(0)来实现这一目标。

如果你问为什么here your answer。

javascript切换功能会导致页面滚动到顶部

3 个答案: