display: none ne fonctionne pas dans IE7

Situation: - J'ai créé un groupe RadioButton. Lorsqu'un utilisateur sélectionne un bouton radio en fonction de son choix, le contenu s'affiche et l'autre contenu est supprimé.display: none ne fonctionne pas dans IE7

Problème: - La page fonctionne très bien dans tous les navigateurs sauf IE7. J'ai besoin d'une solution qui fonctionne également dans IE7.

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>

Ressources visés: - http://www.positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm

J'ai essayé l'approche prévue dans la ressource, il ne fonctionne pas.

Aidez-moi à résoudre ce problème. Merci d'avance.

Source

2010-11-10 vedvrat13

Quelle est l'affichage: & quot? – MatTheCat

'affichage: & quot' n'est certainement pas correct. Où est la citation de fermeture? – leppie

'affichage: & quot' est similaire à l'affichage: ''. Le but était de supprimer la propriété d'affichage du style de l'élément. – vedvrat13

Vous pouvez essayer ceci:

à afficher:

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

Pour masquer:

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

Cela devrait fonctionner.

Source

2010-11-10 10:26:35 Sarfraz

essayez d'utiliser

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

Source

2010-11-10 10:28:53

Merci Tim. La solution que vous avez fournie a résolu mon problème. – vedvrat13

Bien que je suis d'accord vous devez accéder à la propriété à l'aide .style.display Je voudrais faire une note de la bonne façon de modifier les attributs des éléments.

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

Ce ne sera pas imiter .style.display='' que ce n'est pas la syntaxe correcte pour l'attribut (css) et même si cette partie était d'accord, il n'y a qu'une seule citation, donc dans cet état d'esprit que vous souhaitez définir l'affichage d'attributs égal à le reste du document entier.
La bonne façon de désinitialiser un attribut utilise la fonction removeAttribute, comme ceci:

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

Source

2012-07-20 12:08:54 Flygenring

Répondre

Questions connexes