0

我对 JS 并不精通，但我正在尝试为学校搭建一个简单的投资组合网站，并用黑色透明 div 充当灯箱。我正在使用 CSS 和 JS 来切换这个 div，但是在一个长滚动页面上，它在打开时会跳到顶部。这是我的CSS：

<style type="text/css">
div.transbox{
  width:100%;
  height:100%;
  margin:0px 0px;
  position:fixed;
  background-color:#000000;
  background:rgba(0,0,0,0.75);
  z-index:99;
}
p.ptransbox{
    width:400px;
    padding:5px;
    position:relative;
    background:rgba(255,255,255,0.5);
    color:#000;
    border-radius:5px;
}
img.itransbox{
    padding:10px;
    position:relative;
    background:rgba(255,255,255,0.5);
    border-radius:5px;
}

这是JS：

  var toggle2 = function() {
  var mydiv = document.getElementById('02');
  if (mydiv.style.display === 'none' || mydiv.style.display === '')
    mydiv.style.display = 'block';
  else
    mydiv.style.display = 'none'
  }

这是可以立即作为打开 div 的链接查看的代码（打开）：

<td style="float:left; width: 33%" class="school">
<a title="Girl in Chair, 2012" class="tooltip" href="#" onclick="toggle2();" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/thumbs/chairO.png',1)">
<img src="images/thumbs/chair.png" id="Image2" /></a>

这是启动“灯箱”的代码，可以选择将其关闭：

<a href="#" onclick="toggle2();">
<div align="center" id="02" class="transbox" style="display: none;">
<p><img class="itransbox" src="images/anti-thumbs/chair.jpg" /></p>
<p class="ptransbox"><strong>Wörner Hall</strong>, 2010</p></div></a>

请忽略所有标题、替代品或任何特定于内容的内容。您可以在此处查看我的作品集：http: //www.student.nvcc.edu/home/majeffers3/如果您注意到，当您滚动到底部并单击一个项目时，它会将您跳到顶部。我已经潜伏了很长时间，我第一次发布问题，因为我似乎找不到解决方案。非常感谢您的帮助！

4

3 回答 3

2

您需要防止在单击链接时发生默认操作。最简单的方法是false从onclick处理程序返回：

<a title="Girl in Chair, 2012" class="tooltip" href="#" onclick="toggle2(); return false;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/thumbs/chairO.png',1)">
于 2013-08-20T13:45:30.710 回答
1

请从 更改href="#"为href="javascript:;"。单击时它只是转到“#”链接。

于 2013-08-20T13:49:34.543 回答
0

确保从 onclick 处理程序返回 false。如果不这样做，超链接的默认操作将启动，这意味着您将导航到 #，这意味着当前页面的顶部。

于 2013-08-20T13:44:55.493 回答