display:none在IE7中不起作用

时间:2010-11-10 10:19:28

标签: javascript xhtml internet-explorer-7

的情况: - 我创建了一个RadioButton组。当用户根据他的选择选择单选按钮时,将显示内容并删除其他内容。

问题: - 该页面在除IE7之外的所有浏览器中都能正常工作。我需要一个在IE7中运行的解决方案。

代码: -

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE7 Bug display:none</title>
    <style>
        #entireContent, #div1, #div2{
            display:block;
        }
    </style>
    <script type="text/javascript">
        function displayDiv1(){
            document.getElementById('div1').setAttribute('style','display:&quot');
            document.getElementById('div2').setAttribute('style','display:none');

        }
        function displayDiv2(){
            document.getElementById('div1').setAttribute('style','display:none');
            document.getElementById('div2').setAttribute('style','display:&quot');  
        }
    </script>
</head>
<body>
    <div id="entireContent">
        <input type="radio" name="group" value="t1" onclick="displayDiv1()">TEST 1<br>
        <input type="radio" name="group" value="t2" onclick="displayDiv2()">TEST 2<br>
        <div id="div1">TEST 1</div>
        <div id="div2">TEST 2</div>
    </div>
</body>
</html>

参考资源: - http://www.positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm

我尝试了资源中提供的方法,但没有用。

请帮我解决此问题。 在此先感谢。

4 个答案:

答案 0 :(得分:5)

你可以试试这个:

要显示:

document.getElementById('element_id').style.display = 'block';

要隐藏:

document.getElementById('element_id').style.display = 'none';

这应该有效。

答案 1 :(得分:4)

虽然我同意您应该使用.style.display访问该属性,但我想记下改变元素属性的正确方法。

document.getElementById('div2').setAttribute('style','display:&quot');

这不会模拟.style.display='',因为它不是属性(css)的正确语法,即使该部分没问题,也只有一个引号,所以在这种思维模式中你将display属性设置为等于整个文件的其余部分 取消设置属性的正确方法是使用removeAttribute函数,如下所示:

document.getElementById('div1').setAttribute('style','display:none');
document.getElementById('div2').removeAttribute('style');

答案 2 :(得分:0)

尝试使用

document.GetElementById('div1').style.display = "block";
document.GetElemebtById('div2').style.display = "none";

答案 3 :(得分:0)

我尝试了这个 getElementById(“ id”)。style.display = none 它将在chrome中正常工作,但在IE 11浏览器中会遇到问题

我进行了如下修改,然后适用于两种浏览器 getElementById(“ id”)。style.display =“”;