javascript - HTML 不显示内容 - 最近工作

Question

我的网站昨晚功能齐全，我在 sleep 前上传了它。现在，整个页面都是空白的，我需要为我的学校元素快速修复它。由于某种原因，标题仅显示在此 JSFiddle 页面上。

https://jsfiddle.net/qa00rtp1/

HTML:`

    <!-- 
    <link rel="stylesheet" type="text/css" href="Stylesheet.css">
    -->

    <!-- Custom Fonts, Libraries, Etc
    <link href="./index_files/css" rel="stylesheet" type="text/css">
    -->

    <title>Streaks</title>



</div>

<center id="head">
    <h1 id="title">Create Your Own Dystopia</h1>

    <!--
    <span id="page">Home</span>
    -->
</center>


    <center>
        <!-- Nav Bar -->
        <div id="nav">
            <a id="asetting" href="http://fmancoding.com/school/dystopia/#Setting">Setting</a>
            <a id="abackstory" href="http://fmancoding.com/school/dystopia/#BackStory">Back Story</a>
            <a id="arights" href="http://fmancoding.com/school/dystopia/#Rights">Rights</a>
            <a id="apropaganda" href="http://fmancoding.com/school/dystopia/#Propaganda">Propaganda</a>
            <a id="agovernment" href="http://fmancoding.com/school/dystopia/#Government">Government</a>
            <a id="anormalcitizens" href="http://fmancoding.com/school/dystopia/#NormalCitizens">Normal Citizens</a>
            <a id="ainfractions" href="http://fmancoding.com/school/dystopia/#Infractions">Infractions</a>
            <a id="aprotagonist" href="http://fmancoding.com/school/dystopia/#Protagonist">Protagonist</a>
            <a id="asupportingcharacter" href="http://fmancoding.com/school/dystopia/#SupportingCharacter">Supporting Character</a>
        </div>
    </center>

    <!-- Content -->
    <div id="setting" class="toggle" style="visibility: hidden;">
        <center>
            <h3 id="cheader">Setting</h3>
            <p>
                The year 2024 on Mars. The United States has successfully inhabited Mars, as well as the Moon.
            </p>
        </center>
    </div>
    <div id="backstory" class="toggle" style="visibility: hidden;">
        <center>
            <h3 id="cheader">Back Story</h3>
            <p>
                In 2020 we successfully colonized the Moon. We had solved our problem of breathing in space, and in other atmospheres.
                <br>
                Using this technology we also expanded and colonized Mars. Development grew fast but too fast. It became unstable.
                <br>
                The government had lost its power and our now Glorious Leader, Egg McMuffin, rose to power.
                <br>
                Society loved him, or at least at first, because we grew faster, and better. His hunger for power though let to strict sanctions.
                <br>Now, most of society that knows the truth secretly hates him. Our country's growth has halted, and we are not getting any better.
            </p>
        </center>
    </div>        
    <div id="rights" class="toggle" style="visibility: hidden;">
        <center>
            <h3 id="cheader">Rights</h3>
            <p>
                1) Curfew: 10:00.
                <br>
                2) No lying or misleading people.
                <br>
                3) 2 Children Only.
                <br>
                4) Only Government officials may have weapons.
                <br>
                5) Murder &amp; lying will result in public execution.
                <br>
                6) All jobs can not mandate workers to be at work until 8:00.
                <br>
                7) You must submit daily reports on all of your doings.
                <br>
                8) All daily reports must be submited by Midnight. Forgetting will result in a warning.
                <br>
                9) 3 Warnings = Public Execution.
                <br>
                10) Government resistance, Anti-Government movements, will result in public execution.
                <br>
                11) Everyone above the age of 14 is required to watch all public executions, as long as their health permits.
            </p>
        </center>
    </div>        
    <div id="propaganda" class="toggle" style="visibility: hidden;">
        <center>
            <h3 id="cheader">Propaganda</h3>
            <p>
                At all public executions and government functions, when required you must chant our slogan:
                "Listen, Do, Obey!"
                <br>
                If you are caught not chanting, you will receive a warning.
            </p>
        </center>
    </div>        
    <div id="government" class="toggle" style="visibility: hidden;">
        <center>
            <h3 id="cheader">Government</h3>
            <p>
                We have a Dictatorship.
                <br>
                Our Glorious Leader is Egg McMuffin
                <br>
            </p>
        </center>
    </div>        
    <div id="normalcitizens" class="toggle" style="visibility: hidden;">
        <center>
            <h3 id="cheader">Normal Citizens</h3>
            <p>
                All of our citizens are happy, financially stable, and purely awesome.
                <br>
                Everyone appears to fully support the government, and Anti-Government rallies are next to none.
            </p>
        </center>
    </div>        
    <div id="infractions" class="toggle" style="visibility: hidden;">
        <center>
            <h3 id="cheader">Infractions</h3>
            <p>
                The list below shows the punishments in order from first to last:
                <br>
                1st Consequence) A warning 
                2nd Consequence) Guantanamo Bay - 1 month
                3rd Consequence) Public Execution
            </p>
        </center>
    </div>        
    <div id="protagonist" class="toggle" style="visibility: hidden;">
        <center>
            <h3 id="cheader">Protagonist</h3>
            <p>
                I am concerned about the harsh consequences the government has imposed.
                <br>
                They are unjust and no human deserves to be publically executed for their 3rd crime, when it could have been harmless
                <br>
                We have no power to pass laws, so we need to create our own uprising.
                <br>
                We will gather members until we believe we are strong enough to stand for war.
            </p>
        </center>
    </div>        
    <div id="supportingcharacter" class="toggle" style="visibility: hidden;">
        <center>
            <h3 id="cheader">Supporting Character</h3>
            <p>
                My best friend, Bob, has agreed to help me start our uprising.
                <br>
                He has contacts in which he gathers information from to help expose the governments secrets and flaws.
                <br>
                People who have been doing harmless crimes, could be executed unjustfully.
                <br>
                Bob has been doing most of the recruiting for us, and our numbers are growing rapidly.
                <br>
                Even though we are growing rapidly along with hate against the government, we are still fully anonymous.
            </p>
        </center>
    </div>


    <!-- End of Content -->

`

Javascript

`        
        $(document).ready(function() {

            //alert("Hello! I am an alert box!!");


            $( "#setting" ).css( 'visibility', 'hidden' );
            $( "#backstory" ).css( 'visibility', 'hidden' );
            $( "#rights" ).css( 'visibility', 'hidden' );
            $( "#propaganda" ).css( 'visibility', 'hidden' );
            $( "#government" ).css( 'visibility', 'hidden' );
            $( "#normalcitizens" ).css( 'visibility', 'hidden' );
            $( "#infractions" ).css( 'visibility', 'hidden' );
            $( "#protagonist" ).css( 'visibility', 'hidden' );
            $( "#supportingcharacter" ).css("visibility","hidden");


            $( "#asetting" ).click(function() {
                $(".toggle").css("visibility", "hidden");
                $(".toggle").css("display","block");
                $("#setting").css("visibility","initial");
            });

            $( "#abackstory" ).click(function() {
                $(".toggle").css("visibility", "hidden");
                $(".toggle").css("display","block");
                $( "#backstory" ).css( 'visibility', 'initial' );
            });

            $( "#arights" ).click(function() {
                $(".toggle").css("visibility", "hidden");
                $(".toggle").css("display","block");
                $( "#rights" ).css( 'visibility', 'initial' );
            });

            $( "#apropaganda" ).click(function() {
                $(".toggle").css("visibility", "hidden");
                $(".toggle").css("display","none");
                $( "#propaganda" ).css( 'visibility', 'initial' );

                $( "#propaganda" ).css( 'display', 'block' );
                $( "#government" ).css( 'display', 'block' );
            });

            $( "#agovernment" ).click(function() {
                $(".toggle").css("visibility", "hidden");
                $(".toggle").css("display","none");
                $( "#government" ).css( 'visibility', 'initial' );

                $( "#propaganda" ).css( 'display', 'block' );
                $( "#government" ).css( 'display', 'block' );
            });

            $( "#anormalcitizens" ).click(function() {
                $(".toggle").css("visibility", "hidden");
                $(".toggle").css("display","none");
                $( "#normalcitizens" ).css( 'visibility', 'initial' );

                $( "#propaganda" ).css( 'display', 'block' );
                $( "#government" ).css( 'display', 'block' );
                $("#normalcitizens").css("display","block");
            });

            $( "#ainfractions" ).click(function() {
                $(".toggle").css("visibility", "hidden");
                $(".toggle").css("display","none");
                $( "#infractions" ).css( 'visibility', 'initial' );

                $( "#propaganda" ).css( 'display', 'block' );
                $( "#government" ).css( 'display', 'block' );
                $("#normalcitizens").css("display","block");
                $("#infractions").css("display","block");
            });

            $( "#aprotagonist" ).click(function() {
                $(".toggle").css("visibility", "hidden");
                $(".toggle").css("display","none");
                $( "#protagonist" ).css( 'visibility', 'initial' );

                $( "#propaganda" ).css( 'display', 'block' );
                $( "#government" ).css( 'display', 'block' );
                $("#normalcitizens").css("display","block");
                $("#infractions").css("display","block");
                $("#protagonist").css("display","block");
            });

            $( "#asupportingcharacter" ).click(function() {
                $(".toggle").css("visibility", "hidden");
                $(".toggle").css("display","none");
                $( "#supportingcharacter" ).css( 'visibility', 'initial' );

                $("#supportingcharacter").css("display","block");
            });

        });`

CSS:`

:root {
        --b1: #0D42BC;
        --b2: #4D74CE;
        --b3: #2758C9;
        --b4: #09328F;
        --b5: #062670;
    }

    #b{
        background-color: var(--b4);
        color: white;
        font-family: 'Montserrat', sans-serif;
        margin: 0px;

    }
    #nav a{
        color: white;
        text-decoration: none;
        margin: 1%;
    }
    #nav{
        border: 1px solid black;
        background-color: var(--b4);
        width: 100%;
        margin: 0px;
        left: 0px;
        right: 0px;

    }
    #title{
        background-color: var(--b5);
        margin: 0px;
        width: 100%;
        color: white;
    }
    #page{
        font-size: 20px;
        background-color: var(--b5);
    }
    #head{
        background-color: var(--b5);
    }
    html{
        background-color: var(--b3);
    }
    .toggle{
        border: 1px black solid;
        background-color: var(--b1);
    }
    `

更新:我犯了一个愚蠢的错误，没有在 fiddle 中包含 jQuery，当上传到我的网络服务器时，我一定使用了本地 jQuery 文件。再次感谢您的所有帮助。

Answer 1

在您的 HTML 中有几个元素，它们具有属性 style="visibility: hidden;"

从 HTML 中删除 style 并且最初隐藏的 block 将变得可见