0
Meine Website war letzte Nacht voll funktionsfähig und ich habe sie hochgeladen, bevor ich ins Bett ging. Jetzt ist die ganze Seite leer und ich brauche es schnell für mein Schulprojekt. Aus irgendeinem Grund wird die Kopfzeile nur auf dieser JSFiddle-Seite angezeigt.HTML zeigt keinen Inhalt an - arbeitete vor kurzem
https://jsfiddle.net/qa00rtp1/
HMTL: `
<!--
<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 & 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 -->
`
Javscript
`
$(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);
}
`
UPDATE: Es war ein dummer Fehler auf Mine über nicht jQuery in der Geige, einschließlich, und wenn sie auf meinen Web-Server hochladen ich eine lokale jQuery-Datei verwendet haben muß. Nochmals vielen Dank für Ihre Hilfe.
Die Geige sichtbar wurde wie jQuery nicht - https://jsfiddle.net/qa00rtp1/1/ –
Als beiseite würde ich vorschlagen, dass Sie DRY Codierungsmuster erforschen, da Ihr gesamter JS-Code auf 10-15 Zeilen komprimiert werden könnte. –
'