隐藏 div 在 IE8 中无效

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

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

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

API Document for siblings

Answer 2

getElementsByClassName IE8 不支持该方法。

您应该使用 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 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。（现在如何运作）

我只想添加在 mouseover/mouseout 期间显示隐藏的 div 的选项。

谢谢。

隐藏 div 在 IE8 中无效

Hide div not works in IE8

javascript

jquery

internet-explorer-8