0

onmouseover我有一个脚本可以在两个由事件触发的弹出窗口之间切换。其中一个特点是弹出窗口一直持续到下一个onmouseover事件。我想要其中很多，因此要隐藏的弹出窗口不能像我的脚本中那样“硬编码”。有没有办法将下次调用弹出函数时需要不显示的弹出窗口的 id 存储在变量中？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
function popup(show,hide){
    show.style.display="block"
    hide.style.display="none"
    }
</script>
<style type="text/css">
.pop {
    position: absolute;
    display: none;
    top: 50px;
    left: 200px;
    width: 300px;
}
</style>
</head>
<body>

<table><tr>
<td onmouseover="popup(pop1,pop2)">Show popup 1</td>
<td onmouseover="popup(pop2,pop1)">Show popup 2</td>
</tr></table>

<div class="pop" id="pop1">This is popup 1</div>
<div class="pop" id="pop2">Popup 2 is here</div>

</body>
</html>

或访问http://www.salemharvest.org/Utilities/TestingPHP/testingpopupdivs5.php

4

2 回答 2

0

概括它的一种方法是使用元素索引来显示相关的弹出窗口。这将要求弹出元素（pop类元素）包含在一个元素中，以使弹出器和弹出元素索引都像两个相同长度的数组一样映射。

显示弹出窗口时，弹出元素保存在一个变量中，稍后当鼠标在不同的弹出元素上时将使用该变量。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
addEventListener("DOMContentLoaded", function() {
  var lastPopup = null;
  function showit(ev) {
    var popups = document.getElementById("popups").children;
    eleToShow = popups[ev.target.cellIndex];
    if (lastPopup && (lastPopup !== eleToShow)) lastPopup.style.display = "none";
    eleToShow.style.display = "block";
    lastPopup = eleToShow;
  }
  var poppers = document.getElementById("poppers").cells, i;
  for (i = 0; i < poppers.length; i++) {
    poppers[i].addEventListener("mouseover", showit, false);
  }
}, false);
</script>
<style type="text/css">
.pop {
    position: absolute;
    display: none;
    top: 50px;
    left: 200px;
    width: 300px;
}
</style>
</head>
<body>

<table><tr id="poppers">
<td>Show popup 1</td>
<td>Show popup 2</td>
</tr></table>

<div id="popups">
<div class="pop">This is popup 1</div>
<div class="pop">Popup 2 is here</div>
</div>

</body>
</html>
于 2012-11-04T02:52:16.637 回答
0

我可能应该从这个开始，但我的 poppers 实际上是行，而不是单元格。我尝试了对 Jay 的代码进行简单修改的​​方法来处理行。我将其更改为索引行，然后使用 rowIndex 查找弹出窗口，但我遗漏了一些东西。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
// function by Jay at stackoverflow
addEventListener("DOMContentLoaded", function() {
  var lastPopup = null;
  function showit(ev) {
    var popups = document.getElementById("popups").children;
    eleToShow = popups[ev.target.rowIndex];
    if (lastPopup && (lastPopup !== eleToShow)) lastPopup.style.display = "none";
    eleToShow.style.display = "block";
    lastPopup = eleToShow;
  }
  var poppers = document.getElementById("poppers").rows, i;
  for (i = 0; i < poppers.length; i++) {
    poppers[i].addEventListener("mouseover", showit, false);
  }
}, false);
</script>
<style type="text/css">
.pop {
    position: absolute;
    display: none;
    top: 100px;
    left: 200px;
    width: 300px;
}
</style>
</head>
<body>

<table id="poppers">
<tr><td>Show popup 1</td></tr>
<tr><td>Show popup 2</td></tr>
<tr><td>Show popup 3</td></tr>
</table>

<div id="popups">
<div class="pop">This is popup 1</div>
<div class="pop">Popup 2 is here</div>
<div class="pop">And then popup 3</div>
</div>

</body>
</html>
于 2012-11-04T12:52:47.430 回答