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="#"

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

2 个答案: