Display: nobody works in IE7

Situation: - I created the RadioButton group. When a user selects a radio button depending on his choice, the content is displayed and other content is deleted.

Problem: - The page works fine in all browsers except IE7. I need a solution that works in IE7 too.

The code: -

<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>

Estimated resources: - http://www.positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm

I tried the approach specified in the resource, it did not work.

Please help me solve this problem. Thanks at Advance.

+3
source share
4 answers

Instead, you can try:

Display:

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

Hide:

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

That should work.

+5

, .style.display. .

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

.style.display='', (css), , , .
- removeAttribute, :

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

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

getElementById ("id"). style.display = Chrome , IE 11

, , getElementById ("id"). style.display = "";

0

Source: https://habr.com/ru/post/1774059/


All Articles