3个按钮在javascript中显示/隐藏3个div

Question

I used one of the codes I found in this website for creating 3 buttons which hided and showed 3 different div's. Code I found was created for 2 div's, so I've tried to edit it to support 3 div's. At first, it looked like it works, but then I noticed one problem: when you click on button which shows first or second div, everything in that div is clickable and when you click on something inside div, it open third div for no reason, how to fix that? Text inside div should not be clickable. Here's link for example of that problem: http://www.llbm.lt/etnografiniai_regionai/mazoji_lietuva.html

Here's code:

<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

You aren't closing the image tags properly

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

This should be:

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

You made the same mistake with the other 2 images as well, after closing them this behaviour should disappear.

Answer 2

As said before: youre not closing the img tag properly, also this might bug your code:

"href="#" should be href="#"