0

我想要做的是，当用户在一个内容框中选中单选框时，它将显示下一个。当我使用 javascript 执行此操作时，所有框都在彼此内部并且搞砸了这是我的整个代码，因此您可以看到 css 等。

<html>
    <head>
        <style>
        html, body {
            background-image:initial;
            background-repeat-x:initial;
            background-repeat-y:initial;
            background-repeat:no-repeat;
            background-attachment:initial;
            background-position:initial initial;
            background-position-x:initial;
            background-position-y:initial;
            background-origin:initial;
            background-clip:initial;
            background-color:#EEEEEE;
            font-family:'Source Sans Pro', sans-serif;
            color:#262626;
            margin:25px;
        }
        .texts {
            position:relative;
            z-index:1;
            -webkit-border-top-left-radius:5px;
            border-top-left-radius:5px;
            -o-border-top-left-radius:5px;
            -ms-border-top-left-radius:5px;
            -moz-border-radius-topleft:5px;
            -webkit-border-top-right-radius:5px;
            border-top-right-radius:5px;
            -o-border-top-right-radius:5px;
            -ms-border-top-right-radius:5px;
            -moz-border-radius-topright:5px;
            -webkit-border-bottom-right-radius:5px;
            border-bottom-right-radius:5px;
            -o-border-bottom-right-radius:5px;
            -ms-border-bottom-right-radius:5px;
            -moz-border-radius-bottomright:5px;
            -webkit-border-bottom-left-radius:5px;
            border-bottom-left-radius:5px;
            -o-border-bottom-left-radius:5px;
            -ms-border-bottom-left-radius:5px;
            -moz-border-radius-bottomleft:5px;
            width:25%;
            font-family:Montserrat, sans-serif;
            font-size:14px;
            text-align:center;
            border:1px solid #818181;
            padding:10px;
        }
        .title {
            margin:-10;
            background-image:url(images/blue.png);
            height:20px;
            padding-bottom:10px;
            padding-top:6px;
            text-align:center;
            font-family:Montserrat, sans-serif;
            font-size:16px;
            -webkit-border-top-left-radius:5px;
            border-top-left-radius:5px;
            -o-border-top-left-radius:5px;
            -ms-border-top-left-radius:5px;
            -moz-border-radius-topleft:5px;
            -webkit-border-top-right-radius:5px;
            border-top-right-radius:5px;
            -o-border-top-right-radius:5px;
            -ms-border-top-right-radius:5px;
            -moz-border-radius-topright:5px;
        }
        .button {
            background-image:url(images/blue.png);
            background-repeat-x:repeat;
            background-repeat-y:no-repeat;
            background-repeat:repeat-x;
            background-attachment:initial;
            background-position:initial initial;
            background-position-x:initial;
            background-position-y:initial;
            background-origin:initial;
            background-clip:initial;
            background-color:#000000;
            -webkit-border-top-left-radius:5px;
            border-top-left-radius:5px;
            -o-border-top-left-radius:5px;
            -ms-border-top-left-radius:5px;
            -moz-border-radius-topleft:5px;
            -webkit-border-top-right-radius:5px;
            border-top-right-radius:5px;
            -o-border-top-right-radius:5px;
            -ms-border-top-right-radius:5px;
            -moz-border-radius-topright:5px;
            -webkit-border-bottom-right-radius:5px;
            border-bottom-right-radius:5px;
            -o-border-bottom-right-radius:5px;
            -ms-border-bottom-right-radius:5px;
            -moz-border-radius-bottomright:5px;
            -webkit-border-bottom-left-radius:5px;
            border-bottom-left-radius:5px;
            -o-border-bottom-left-radius:5px;
            -ms-border-bottom-left-radius:5px;
            -moz-border-radius-bottomleft:5px;
            color:#F0FFF0;
            cursor:pointer;
            border:1px solid #0774B9;
            padding:8px 35px 8px 35px;
        }
        .button:hover {
            background-image:url(images/blue_hover.png);
            background-repeat-x:repeat;
            background-repeat-y:no-repeat;
            background-repeat:repeat-x;
            background-attachment:initial;
            background-position:initial initial;
            background-position-x:initial;
            background-position-y:initial;
            background-origin:initial;
            background-clip:initial;
            background-color:#000000;
        }
        .button:active {
            background-image:url(images/blue_click.png);
            background-repeat-x:repeat;
            background-repeat-y:no-repeat;
            background-repeat:repeat-x;
            background-attachment:initial;
            background-position:initial initial;
            background-position-x:initial;
            background-position-y:initial;
            background-origin:initial;
            background-clip:initial;
            background-color:#000000;
        }
        .label_check {
            -webkit-appearance:none;
            background-color:#FAFAFA;
            box-shadow:rgba(0, 0, 0, 0.046875) 0px 1px 2px, rgba(0, 0, 0, 0.046875) 0px -15px 10px -12px inset;
            -webkit-border-top-left-radius:50px;
            border-top-left-radius:50px;
            -o-border-top-left-radius:50px;
            -ms-border-top-left-radius:50px;
            -moz-border-radius-topleft:50px;
            -webkit-border-top-right-radius:50px;
            border-top-right-radius:50px;
            -o-border-top-right-radius:50px;
            -ms-border-top-right-radius:50px;
            -moz-border-radius-topright:50px;
            -webkit-border-bottom-right-radius:50px;
            border-bottom-right-radius:50px;
            -o-border-bottom-right-radius:50px;
            -ms-border-bottom-right-radius:50px;
            -moz-border-radius-bottomright:50px;
            -webkit-border-bottom-left-radius:50px;
            border-bottom-left-radius:50px;
            -o-border-bottom-left-radius:50px;
            -ms-border-bottom-left-radius:50px;
            -moz-border-radius-bottomleft:50px;
            display:inline-block;
            position:relative;
            border:1px solid #CACECE;
            padding:6px;
        }
        .label_check:checked {
            background-color:#E9ECEE;
            color:#99A1A7;
            box-shadow:rgba(0, 0, 0, 0.046875) 0px 1px 2px, rgba(0, 0, 0, 0.046875) 0px -15px 10px -12px inset, rgba(255, 255, 255, 0.0976563) 15px 10px -12px inset, rgba(0, 0, 0, 0.0976563) 0px 0px 10px inset;
            border:1px solid #ADB8C0;
        }
        .label_check:checked::after {
            content:' ';
            width:6px;
            height:6px;
            -webkit-border-top-left-radius:50px;
            border-top-left-radius:50px;
            -o-border-top-left-radius:50px;
            -ms-border-top-left-radius:50px;
            -moz-border-radius-topleft:50px;
            -webkit-border-top-right-radius:50px;
            border-top-right-radius:50px;
            -o-border-top-right-radius:50px;
            -ms-border-top-right-radius:50px;
            -moz-border-radius-topright:50px;
            -webkit-border-bottom-right-radius:50px;
            border-bottom-right-radius:50px;
            -o-border-bottom-right-radius:50px;
            -ms-border-bottom-right-radius:50px;
            -moz-border-radius-bottomright:50px;
            -webkit-border-bottom-left-radius:50px;
            border-bottom-left-radius:50px;
            -o-border-bottom-left-radius:50px;
            -ms-border-bottom-left-radius:50px;
            -moz-border-radius-bottomleft:50px;
            position:absolute;
            top:3px;
            background-image:initial;
            background-repeat-x:initial;
            background-repeat-y:initial;
            background-repeat:no-repeat;
            background-attachment:initial;
            background-position:initial initial;
            background-position-x:initial;
            background-position-y:initial;
            background-origin:initial;
            background-clip:initial;
            background-color:#99A1A7;
            box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 10px inset;
            left:3px;
            font-size:32px;
        }

        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <link href="http://fonts.googleapis.com/css?family=Montserrat"
        rel="stylesheet" type="text/css">
        <title>Frooloo, the free face morphing software</title>
        <script type="text/javascript">
        function showStuff(id) {
            document.getElementById(id).style.display = 'block';
        }
        </script>
    </head>
    <body>
        <center>
            <h1>Logo Here!</h1>
            <br>
        </center>
        <span id="1" style="display: block;">
            <div class="texts">
                <div class="title">
                    <strong>Step 1</strong>
                    <br>
                    <br>
                </div>Press "Allow" when you are asked for access to your camera.
                <br>
                <label class="label_check">
                    <input name="sample_check1" id="sample_check1" value="1" type="radio"
                    nclick="showStuff('3');  />
    Done?
        </label></div></span>
    <br>
                        <span id=" 2 " style="display: none; "><div class="texts ">

                                        <div class="title " >
                        <strong>Step 2</strong><br><br>
                    </div>

    Make sure your webcam is facing you and your volume is up, so you can hear the beep to let you know analyzing is done.<br>
    <label class="label_check " >
        <input name="sample_check2 " id="sample_check2 " value="1
                    " type="radio " onclick="showStuff( '3'); />Done?</label>
            </div>
        </span>
        <br>
        <span id="3" style="display: none;">"
            <div class="texts">
                <div class="title">
                    <strong>Step 3</strong>
                    <br>
                    <br>
                </div>A black dot will appear in the area to the right, stare at that black
                dot and DO NOT move your head, the software is analyzing your face. You
                can move after you hear a beep. This process will start when you check
                the box below.
                <br>
                <label class="label_check">
                    <input name="sample_check3" id="sample_check3" value="1" type="radio"
                    />Ready?</label>
            </div>
        </span>
        <div class="img">
            <img src="images/dot.png" img="" style="position:absolute; left:610px; top:120px; ">
        </div>
        <script>
        $('body').hide();
        $('body').fadeIn(1000);
        </script>
        <script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script>
        <script type="text/javascript">
        var pageTracker = _gat._getTracker("UA-301801-11");
        pageTracker._trackPageview();
        </script>
    </body>

</html>

这是执行此操作的代码部分：

<center>
    <h1>Logo Here!</h1>
    <br>
</center>
<span id="1" style="display: block;">
    <div class="texts">
        <div class="title">
            <strong>Step 1</strong>
            <br>
            <br>
        </div>Press "Allow" when you are asked for access to your camera.
        <br>
        <label class="label_check">
            <input name="sample_check1" id="sample_check1" value="1" type="radio"
            onclick="showStuff('2');  />
    Done?
        </label></div></span>
    <br>
                        <span id=" 2 " style="display: none;
            "><div class="texts ">

                                        <div class="title " >
                        <strong>Step 2</strong><br><br>
                    </div>

    Make sure your webcam is facing you and your volume is up, so you can hear the beep to let you know analyzing is done.<br>
    <label class="label_check " >
        <input name="sample_check2 " id="sample_check2 " value="1
            " type="radio " onclick="showStuff( '3'); />Done?</label>
    </div>
</span>
<br>
<span id="3" style="display: none;">"
    <div class="texts">
        <div class="title">
            <strong>Step 3</strong>
            <br>
            <br>
        </div>A black dot will appear in the area to the right, stare at that black
        dot and DO NOT move your head, the software is analyzing your face. You
        can move after you hear a beep. This process will start when you check
        the box below.
        <br>
        <label class="label_check">
            <input name="sample_check3" id="sample_check3" value="1" type="radio"
            />Ready?</label>
    </div>
</span>

这是JS函数，

<script type="text/javascript">
    function showStuff(id) {
        document.getElementById(id).style.display = 'block';
    }
</script>

这是发生了什么，去这个链接看看http://188.165.208.144/~seegee/planz/real/morph.php

应该有 3 个内容框在另一个之上，但是当我这样做时，会发生这种情况，是的，那个黑点应该在那里......

4

3 回答 3

1

ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 ("_") , 冒号 (":") 和句点 (".")。

于 2012-08-14T20:46:58.080 回答
0

Scrappedcola 是对的。

对于你的第二个问题，有一个额外的报价，因为你有

<span id="a3" style="display: none;">"<div class="texts" >
于 2012-08-14T21:04:01.757 回答
0

ID 不应以数字开头（请参阅此帖子）。除此之外，当您<div>使用内联元素 ( <span>) 包装块元素 ( ) 时，您可能会遇到各种浏览器的问题。

您的 onclick 缺少引号：onclick="showStuff('2');应该是onclick="showStuff('2');"

于 2012-08-14T20:47:35.450 回答