0

私がやろうとしているのは、ユーザーが 1 つのコンテンツ ボックスでラジオ ボックスをオフにすると、次のボックスが表示されるようにすることです。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

ID は数字で始めるべきではありません (この投稿を参照してください)。それ以外にも、ブロック要素 ( <div>) をインライン要素 ( ) でラップすると、さまざまなブラウザーで問題が発生する可能性があります<span>。

onclick に引用符がonclick="showStuff('2');ありません:onclick="showStuff('2');"

于 2012-08-14T20:47:35.450 に答える
0

Scrappedcolaは正しいです。

2 番目の問題については、追加の見積もりがあります。

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