3個按鈕在javascript中顯示/隱藏3個div

Question

我使用了我在本網站上找到的一個代碼來創建3個按鈕，這些按鈕隱藏並顯示了3個不同的div。 我發現的代碼是為2個div創建的，所以我嘗試編輯它以支持3個div。 起初，它看起來像是有效的，但后來我注意到一個問題：當你點擊顯示第一個或第二個div的按鈕時，該div中的所有內容都是可點擊的，當你點擊div中的某個內容時，它會毫無理由地打開第三個div ，如何解決？ div中的文本不應該是可點擊的。 以下是該問題的鏈接： http ： //www.llbm.lt/etnografiniai_regionai/mazoji_lietuva.html

這是代碼：

<div class="trys-mygtukai">
<a "href="#" onclick="return showHide();"><img SRC="/etnografiniai_regionai/img/informacija_button.png"</a>
<a "href="#" onclick="return showHide1();"><img SRC="/etnografiniai_regionai/img/architektura_button.png"</a>
<a "href="#" onclick="return showHide2();"><img SRC="/etnografiniai_regionai/img/kita_button.png"</a>
</div>    

<div id="pirmas" style="display:none;"></div>
<div id="antras" style="display:none;"></div>
<div id="trecias" style="display:none;"></div>

<script type="text/javascript" language="javascript">
function showHide() {
    var ele = document.getElementById("pirmas");
    var ele1 = document.getElementById("antras");
    var ele2 = document.getElementById("trecias");
    ele1.style.display = "none";
    ele2.style.display = "none";
    if(ele.style.display == "block") {
            ele.style.display = "none";             
      }
    else {
        ele.style.display = "block";            
    }
}

function showHide1() {
    var ele = document.getElementById("pirmas");
    var ele1 = document.getElementById("antras");
    var ele2 = document.getElementById("trecias");
    ele.style.display = "none";
    ele2.style.display = "none";
    if(ele1.style.display == "block") {
            ele1.style.display = "none";
      }
    else {
        ele1.style.display = "block";
    }
}

    function showHide2() {
    var ele = document.getElementById("pirmas");
    var ele1 = document.getElementById("antras");
    var ele2 = document.getElementById("trecias");
    ele.style.display = "none";
    ele1.style.display = "none";
    if(ele2.style.display == "block") {
            ele2.style.display = "none";
      }
    else {
        ele2.style.display = "block";
    }
}

Answer 1

您沒有正確關閉圖像標簽

<a "href="#" onclick="return showHide2();"><img SRC="/etnografiniai_regionai/img/kita_button.png"</a>

這應該是：

<a href="#" onclick="return showHide2();"><img SRC="/etnografiniai_regionai/img/kita_button.png"></a>

你和其他2張圖片也犯了同樣的錯誤，關閉它們后，這種行為應該會消失。

Answer 2

如前所述：你沒有正確關閉img標簽，這也可能會破壞你的代碼：

"href="#"應為href="#"