在下拉菜單中設置默認可見分區

我發現了一個有用的腳本，可以使用下拉菜單使div可見和隱藏。唯一的問題是所有的div最初都是隱藏的，我希望第一個div默認可見。以下是腳本：在下拉菜單中設置默認可見分區

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

謝謝。

來源

2010-09-21 Beau

我不喜歡那個劇本，但...

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

來源

2010-09-21 15:43:39

謝謝佩德羅。這很好。這似乎是一種乾淨而有效的方式。 – Beau 2010-09-21 17:09:10

另一個問題：我想在同一頁面上多次使用這個腳本。如何通過更改「var lastDiv =」one「來設置默認可見div;」到「var lastDiv = div與類名稱visibleDiv」，因爲我不能給每個默認的div一個「一個」的ID。謝謝。 – Beau 2010-09-22 16:11:49

這裏就是我想是做什麼，我試圖做的最簡單的方法。它使用z-index來堆疊div，而不是顯示/隱藏它們。

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

來源

2010-09-22 20:20:36 Beau

在下拉菜單中設置默認可見分區

回答

相關問題