Question

这是我的代码。它在chrome和firefox中工作得很好，但在ie8中却没有。我在ie10和ie11进行了测试。它工作..你知道如何解决这个问题吗？..我从这里得到代码：https://jsfiddle.net/XqshE/2/，是否因为这个标签？... getElementsByClassName不支持IE8？

<script src="jquery-1.11.2.min.js"></script>
<script>
function showhide(id){
        if (document.getElementById) {
          var divid = document.getElementById(id);
          var divs = document.getElementsByClassName("hide");
          for(var i=0;i<divs.length;i++) {
             divs[i].style.display = "none";
          }
          divid.style.display = "block";
        } 
        return false;
 }


 </script>


<style>
.bio_image {
    display:inline-block;
    height:250px;
    width:250px;
    cursor:pointer;
}
.hide {
    display:none;
}
</style>
</head>
<body>

<div onclick="showhide('bill');" class="bio_image"><div class="name">Bill Murray</div></div>
<div onclick="showhide('bill2');" class="bio_image"><div class="name">Bill Murray</div></div>
<div onclick="showhide('bill3');" class="bio_image"><div class="name">Bill Murray</div></div>
<div class="hide" id="bill">BILL</div>
<div class="hide" id="bill2">BILL2</div>
<div class="hide" id="bill3">BILL3</div>

Answer 1

IE8不支持

getElementsByClassName方法。

您应该使用document.querySelectorAll('.classname')（适用于IE8 +）或实现该功能的库 - 例如：

jQuery
Moo Tools
DOJO
YUI
Prototype

......其中......

querySelectorAll支持：

http://www.quirksmode.org/dom/w3c_core.html#t13

getElementsByClassName支持：

http://www.quirksmode.org/dom/w3c_core.html#t11

Answer 2

在使用jQuery时，可以使用jQuery的.hide()和.show()函数。修改你的功能如下

<script>
function showhide(id){
     $('#'+id).show();
     $('#'+id).siblings('.hide').hide();   
 }
 </script>

<强> API Document for siblings

Answer 3

替换

function showhide(id){
    if (document.getElementById) {
        var divid = document.getElementById(id);
        var divs = document.getElementsByClassName("hide");
        for(var i=0;i<divs.length;i++) {
            divs[i].style.display = "none";
        }
        divid.style.display = "block";
    } 
    return false;
}

与

function showhide(id){
    $('.hide').hide();
    $('#'+id).show();
    return false;
}

Answer 4

是否可以在此脚本上添加鼠标悬停效果？因此，当您将鼠标悬停在图像上时，它也会显示隐藏的div。如果你鼠标移出，它将隐藏div。

但是当你点击图片时，它仍会显示隐藏的div。（现在如何运作）

我只想在鼠标悬停/鼠标移出期间添加显示隐藏div的选项。

谢谢。

隐藏div在IE8中不起作用

4 个答案: