La fonction JavaScript fonctionne bien dans Opera mais ne fonctionne pas du tout dans Firefox. Pourquoi?

Question

Ceci est ma fonction JavaScript:

function switch_div(firstID,secondID) { 

    if((document.getElementById(firstID).style.display == 'inline') && 
     (document.getElementById(secondID).style.display == 'inline')) { 
     document.getElementById(firstID).style.display = 'none'; 

    } else if(document.getElementById(firstID).style.display == 'inline'){ 
     document.getElementById(firstID).style.display = 'none'; 
     document.getElementById(secondID).style.display = 'inline'; 

    } else if (document.getElementById(firstID).style.display == 'none') { 

     document.getElementById(firstID).style.display = 'inline'; 
     document.getElementById(secondID).style.display = 'none'; 
    } 
} 

Et voici mon lien et les deux s je veux changer entre eux en cliquant sur le même lien à chaque fois:

<a href="#" onclick="switch_div('first_choice','second_choice');return false" style="position:relative"> 

<div id="first_choice" style="position:relative;">hello</div> 

<div id="second_choice" style="position:relative;">bye</div> 

Ce lien vers la La fonction JavaScript fonctionne bien dans Opera mais pas au dans Firefox. Pourquoi est-ce le cas?

Answer 1

Je ne vois pas question cross-browser: pour moi, ça ne fonctionne pas dans Opera soit. Ce n'est pas trop surprenant: vous vérifiez l'attribut 'style' pour l'affichage en ligne, mais aucun des divs n'a 'display: inline' ici.

De toute façon, inline n'est pas le modèle d'affichage habituel pour div, vous auriez habituellement 'block'.

Suggérer:

<style type="text/css"> 
    .hidden { display: none; } 
</style> 

<a href="#first_choice" id="togglelink">Clickety</a> 
<div id="first_choice"> 
    blah 1 
</div> 
<div id="second_choice"> 
    blah 2 
</div> 

<script type="text/javascript"> 
    function hideToggler(link, a, b) { 
     var state= link.hash.substring(1)==a.id; // set which div is shown initially from the link destination 
     link.onclick= function() { // toggle divs 
      state= !state; 
      a.className= state? 'hidden' : ''; 
      b.className= state? '' : 'hidden'; 
      return false; 
     }; 
     link.onclick(); // hide one of the divs to begin with 
    } 

    hideToggler(
     document.getElementById('togglelink'), 
     document.getElementById('first_choice'), 
     document.getElementById('second_choice') 
    ); 
</script> 

Answer 2

Attributs de style fournis de l'affichage aux divs. Mieux vaut leur donner dans les classes. J'espère que c'est ce que vous cherchiez.

<a href="#" onclick="switch_div('first_choice','second_choice');return false" style="position:relative"> 
<div id="first_choice" style="position:relative;display: inline">hello</div> 
<div id="second_choice" style="position:relative;display: none">bye</div> 

<script> 

function switch_div(firstID,secondID) 
{ 

     if((document.getElementById(firstID).style.display == 'inline') && (document.getElementById(secondID).style.display == 'inline')) 
    { 

     document.getElementById(firstID).style.display = 'none'; 
    } 

     else if(document.getElementById(firstID).style.display == 'inline') 
    { 

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

      document.getElementById(secondID).style.display = 'inline'; 
    } 

     else if (document.getElementById(firstID).style.display == 'none') 
    { 

      document.getElementById(firstID).style.display = 'inline'; 

      document.getElementById(secondID).style.display = 'none'; 
    } 
} 

</script> 

démonstration de travail: http://jsbin.com/iqeli/