Définir la Div Visible par défaut Menu déroulant

J'ai trouvé un script utile qui rend les div visibles et cachés en utilisant un menu déroulant. Le seul problème est que tous les divs sont initialement cachés, et j'aimerais que le premier soit visible par défaut. Voici le script:Définir la Div Visible par défaut Menu déroulant

<html> 

    <head> 
     <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> 
     <title>Untitled Page</title> 
     <script type="text/javascript"><!-- 
var lastDiv = ""; 
function showDiv(divName) { 
    // hide last div 
    if (lastDiv) { 
     document.getElementById(lastDiv).className = "hiddenDiv"; 
    } 
    //if value of the box is not nothing and an object with that name exists, then change the class 
    if (divName && document.getElementById(divName)) { 
     document.getElementById(divName).className = "visibleDiv"; 
     lastDiv = divName; 
    } 
} 
//--> 
</script> 
     <style type="text/css" media="screen"><!-- 
.hiddenDiv { 
    display: none; 
    position: absolute; 
    top: 100px; 
    } 
.visibleDiv { 
    display: block; 
    border: 1px grey solid; 
     position: absolute; 
    top: 100px; 
    } 

--></style> 
    </head> 

    <body bgcolor="#ffffff"> 
     <form id="FormName" action="blah.php" method="get" name="FormName"> 
      <select name="selectName" size="1" onchange="showDiv(this.value);"> 
       <option value="">Choose One...</option> 
       <option value="one">first</option> 
       <option value="two">second</option> 
       <option value="three">third</option> 
      </select> 
     </form> 
     <p id="one" class="hiddenDiv">This is paragraph 1.</p> 
     <p id="two" class="hiddenDiv">This is paragraph 2.</p> 
     <p id="three" class="hiddenDiv">This is paragraph 3.</p>   
    </body> 

</html>

Merci.

Source

2010-09-21 Beau

Je n'aime pas ce script, mais ...

<head> 
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> 
    <title>Untitled Page</title> 
    <script type="text/javascript"><!-- 
     var lastDiv = "one"; 
     function showDiv(divName) { 
      // hide last div 
      if (lastDiv) { 
       document.getElementById(lastDiv).className = "hiddenDiv"; 
      } 
      //if value of the box is not nothing and an object with that name exists, then change the class 
      if (divName && document.getElementById(divName)) { 
       document.getElementById(divName).className = "visibleDiv"; 
       lastDiv = divName; 
      } 
     } 
     //--> 
    </script> 
    <style type="text/css" media="screen"><!-- 
     .hiddenDiv { 
      display: none; 
      position: absolute; 
      top: 100px; 
     } 
     .visibleDiv { 
      display: block; 
      border: 1px grey solid; 
      position: absolute; 
      top: 100px; 
     } 

     --></style> 
</head> 

<body bgcolor="#ffffff"> 
    <form id="FormName" action="blah.php" method="get" name="FormName"> 
     <select name="selectName" size="1" onchange="showDiv(this.value);"> 
      <option value="">Choose One...</option> 
      <option value="one">first</option> 
      <option value="two">second</option> 
      <option value="three">third</option> 
     </select> 
    </form> 
    <p id="one" class="visibleDiv">This is paragraph 1.</p> 
    <p id="two" class="hiddenDiv">This is paragraph 2.</p> 
    <p id="three" class="hiddenDiv">This is paragraph 3.</p> 
</body>

Source

2010-09-21 15:43:39

Merci, Pedro. Cela fonctionne très bien. Cela semble être une façon propre et efficace de le faire. – Beau

Une autre question: Je veux utiliser ce script plusieurs fois sur la même page. Comment puis-je définir la div visible par défaut en changeant "var lastDiv =" un ";" à "var lastDiv = div avec le nom de classe visibleDiv" puisque je ne peux pas donner à chaque div par défaut un identifiant de "un". Merci. – Beau

Voici ce que je pense est la façon la plus simple de faire ce que je suis en train de faire. Il utilise z-index pour empiler les divs plutôt que de les montrer/cacher.

<html> 
<head> 
<style type="text/css" media="screen"><!-- 
p { 
    color: #FFF; 
    position: absolute; 
} 
#one { 
    background-color: #699; 
    z-index: 1; 
} 
#two { 
    background-color: #039; 
} 
#three { 
    background-color: #909; 
} 
#four { 
    background-color: #F00; 
} 
--></style> 
<script type="text/javascript"> 
var z = 10; 
function ShowHide(id) { 
document.getElementById(id).style.display = "block"; 
document.getElementById(id).style.zIndex = z++; 
} 
</script> 
</head> 
<body> 
    <form action="" method="post" name="session"> 
    <select name="name" size="1" onchange="ShowHide(this.value);"> 
    <option value="one" selected="selected">One</option> 
    <option value="two">Two</option> 
    <option value="three">Three</option> 
    <option value="four">Four</option> 
    </select> 
    </form> 
    <p id="one">This is paragraph 1.</p> 
    <p id="two">This is paragraph 2.</p> 
    <p id="three">This is paragraph 3.</p> 
    <p id="four">This is paragraph 4.</p> 
</body> 
</html>

Source

2010-09-22 20:20:36 Beau

Définir la Div Visible par défaut Menu déroulant

Répondre

Questions connexes