Question

我有一个显示/隐藏javascript的magicShow：

function magicShow(e) {
    ele = document.getElementById(e);
    if (ele.style.display == "none") {
        ele.style.opacity = 0;
        ele.style.filter = "alpha(opacity=0)";
        ele.style.display = "";
        valueop = 1;
        setTimeout("fadeIn()", openingdelay)
    } else {
        valueop = 9;
        setTimeout("fadeOut()", closingdelay)
    }
}

function fadeOut() {
    if (valueop < 1) {
        ele.style.display = "none";
        return false
    }
    ele.style.opacity = valueop / 10;
    ele.style.filter = "alpha(opacity=" + valueop * 10 + ")";
    valueop = valueop - 1;
    setTimeout("fadeOut()", closingspeed)
}

function fadeIn() {
    if (valueop > 10) {
        return false
    }
    ele.style.opacity = valueop / 10;
    ele.style.filter = "alpha(opacity=" + valueop * 10 + ")";
    valueop = valueop + 1;
    setTimeout("fadeIn()", openingspeed)
}
var openingdelay = 100;
var closingdelay = 100;
var openingspeed = 15;
var closingspeed = 15

在两个相邻的链接上，我输入了这段代码：

<a href="#" onClick="magicShow('showdiv-A'); return false;">Link A</a>
<a href="#" onClick="magicShow('showdiv-B'); return false;">Link B</a>

单击/点击时，每个链接都会显示一个隐藏的div。再次点击链接，div消失。两个div可以同时打开或关闭。我将Div A和Div B放在不同的位置，以免它们重叠。但是有可能让div重叠并修改脚本行为，以便：

如果div A可见并且您点击链接B，则div A消失并且div B出现；
如果div B可见并且您点击链接A，则div B消失并且div A出现；

answer here有一个JSFiddle并没有这样做，但是它可能是解决方案的基础。解决方案应具有两个链接，并且不要失去点击以使div消失的功能。另外，我更喜欢在没有jquery的情况下执行此操作。

PS：在这里有人问过类似的问题，但是（我认为）总是涉及单个链接。

Answer 1

这是一种方法。不过，我使用的是可见性，而不是 display 属性。即使它不可见，这也可以将对象固定在适当的位置。一切都非常简单。告诉函数要显示的对象，然后在切换块中找出需要隐藏的对象。附带说明：如果您想知道，可以在delay参数之后为setTimout（）的回调函数提供参数。

var openingdelay = 100;
var closingdelay = 100;
var openingspeed = 15;
var closingspeed = 15

function magicShow(action) {
  var elementToShow;
  var elementToHide;
  switch (action) {
    case "showdiv-A":
      elementToShow = document.getElementById("showdiv-A");
      elementToHide = document.getElementById("showdiv-B");
      break;
    case "showdiv-B":
      elementToHide = document.getElementById("showdiv-A");
      elementToShow = document.getElementById("showdiv-B");
      break;
  }
  if (elementToHide.style.visibility == "visible") {
    setTimeout(fadeOut, closingdelay, elementToHide, 10)
  }

  setTimeout(fadeIn, openingdelay, elementToShow, 0)
}

function fadeOut(element, alpha) {
  if (alpha < 1) {
    element.style.visibility = "hidden";
    return false;
  }
  element.style.opacity = alpha / 10;
  element.style.filter = "alpha(opacity=" + alpha * 10 + ")";
  alpha = alpha - 1;
  setTimeout(fadeOut, closingspeed, element, alpha);
}

function fadeIn(element, alpha) {
  if (alpha > 10) {
    return false;
  }
  element.style.opacity = alpha / 10;
  element.style.filter = "alpha(opacity=" + alpha * 10 + ")";
  element.style.visibility = "visible";
  alpha = alpha + 1;
  setTimeout(fadeIn, openingspeed, element, alpha);
}

<a href="#" onClick="magicShow('showdiv-A'); return false;">Link A</a>
<a href="#" onClick="magicShow('showdiv-B'); return false;">Link B</a>
<div id="showdiv-A" style="visibility:hidden;">I'm div 1</div>
<div id="showdiv-B" style="visibility:hidden;">I'm div 2</div>

Answer 2

这是一种简单的方法

    function magicShow(e) {
      ele = document.getElementById(e);
      if (ele.style.display == "none") {
          ele.style.opacity = 0;
          ele.style.filter = "alpha(opacity=0)";
          ele.style.display = "";
          valueop = 1;
          setTimeout("fadeIn()", openingdelay)
      } else {
          valueop = 9;
          setTimeout("fadeOut()", closingdelay)
      }
      if (e == "showdiv-B") {
        document.getElementById("showdiv-A").style.display = "none"
      } else if (e == "showdiv-A") {
        document.getElementById("showdiv-B").style.display = "none"
      }
    }
    
    function fadeOut() {
      if (valueop < 1) {
          ele.style.display = "none";
          return false
      }
      ele.style.opacity = valueop / 10;
      ele.style.filter = "alpha(opacity=" + valueop * 10 + ")";
      valueop = valueop - 1;
      setTimeout("fadeOut()", closingspeed)
    }
    
    function fadeIn() {
      if (valueop > 10) {
          return false
      }
      ele.style.opacity = valueop / 10;
      ele.style.filter = "alpha(opacity=" + valueop * 10 + ")";
      valueop = valueop + 1;
      setTimeout("fadeIn()", openingspeed)
    }
    var openingdelay = 100;
    var closingdelay = 100;
    var openingspeed = 15;
    var closingspeed = 15

<a href="#" onClick="magicShow('showdiv-A'); return false;">Link A</a>
<a href="#" onClick="magicShow('showdiv-B'); return false;">Link B</a>
<div style="display: none;" id="showdiv-A">
Showing div-A
</div>
<div style="display: none;" id="showdiv-B">
Showing div-B
</div>

div隐藏/显示可隐藏一个div并显示另一个div的javascript

2 个答案: