Question

我有一个div容器，它包含三个div子元素，其中第一个子div元素在页面加载时显示。

我只需要在按钮点击时显示后续子div元素。这意味着当我第一次点击按钮然后它应该显示包含文本“Series Type2”的div，并且当我点击按钮然后再显示下一个子元素“Series Type3”时。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/div/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>On Demand | Vod Info</title>        
        </head>
        <style>
            body {
                font-family: Arial;
                font-weight: bold;
                color: #FFFFFF;
            }
            #recording-container { 
                width:100%; 
                margin:0 auto; 
                background-color:#8E898F; 
                width:40%;
                margin-top:10%;
                height:100px;
            }
            #type {color: #fff; width: 100%}
            #save {color: #fff; width: 100%}
            .placeholder{
                height:20px;
            }
            .spacer{
                height:20px;
            }
            .margin-5{
                margin-left:5%
            }
            .highlight {
                /*-moz-box-shadow: 0 0 5px 4px red;*/
                -webkit-box-shadow: 0 0 0px 0px #ad2eb2;
                box-shadow: 0 0 3px 3px #ad2eb2;
                border-radius: 3px;
            }
            .title{    
                background-color: #ad2eb2;
                text-align: center;    
            }

            .series {    
                height: 36px;    
                width: 80%;
                margin: 0 auto;
                overflow: hidden;
            }
            .seriesType{
                float: left;
                height: 36px;
                line-height: 36px;
                margin: 0 5px;
                padding: 0 10px;
                text-align: center;
                width:100%
            }        
        </style>
        <body>
            <div id="recording-container">
                <div id="title" class="title">Record</div>
                <div class="placeholder"></div>
                <div class="series highlight">
                    <div class="seriesType" id="series_0">Series Type1</div>
                    <div class="seriesType" id="series_1">Series Type2</div>
                    <div class="seriesType" id="series_2">Series Type3</div>
                </div>           
            </div>  
            <input type="button" onclick="switchdiv()" name="Switch" value="Switch">
    <script>
    function switchdiv()
    {
     // Need to write code here
    }
    </script>
        </body> 
    </html>

Answer 1

我看到你没有使用jQuery所以这个答案也不会。

有几种方法可以做到这一点，这里有一个小提琴：http://jsfiddle.net/SP67E/

我建议使用列表而不是让每个列表覆盖另一个列表。每个列表项都将被隐藏，直到需要显示它为止。

但这是你的选择，所以小提琴适应了这一点。

小提琴代码：

var seriesId = 0;
var seriesCount = 3;
function switchdiv() {
    // Stops last series from being hidden
    if (seriesId >= (seriesCount -1)) return;
    // Hides each element in turn
    document.getElementById("series_" + seriesId).style.display="none"
    seriesId++;
}

编辑：如果您想减少这里是更新的小提琴：http://jsfiddle.net/SP67E/1/

Answer 2

也许不是最优雅但这应该有用。

<script>
    var nextSeries = 2;

    function switchdiv()
    {
        $("#series_" + nextSeries).show();
        nextSeries += 1;
    }
</script>

单击时切换Div内容

2 个答案: