div隱藏/顯示可隱藏一個div並顯示另一個div的javascript

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出現；

答案是沒有這樣做的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>