在下拉菜单中设置默认可见分区

我发现了一个有用的脚本，可以使用下拉菜单使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

在下拉菜单中设置默认可见分区

回答

相关问题