3 个按钮 show/hide javascript 中有 3 个 div

Question

我使用了我在该网站上找到的代码之一来创建 3 个按钮，这些按钮隐藏和显示 3 个不同的 div。我发现的代码是为 2 div 创建的，因此我尝试对其进行编辑以支持 3 div。起初，它看起来像工作，但后来我注意到一个问题：当您单击显示第一个或第二个 div 的按钮时，div 中的所有内容都是可单击的，当您单击 div 中的某些内容时=21=]，它无故打开第三个 div，如何解决？ div 内的文本不应可点击。下面是 link 这个问题的例子： 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="#"

3 个按钮 show/hide javascript 中有 3 个 div

3 Buttons show/hide 3 div's in javascript

javascript

html

button

hide

show