Question

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

谢谢。

Answer 1

我不喜欢那个剧本但是......

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

Answer 2

这是我认为最简单的方法来做我想做的事情。它使用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>

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

2 个答案: