0
Мой сайт был полностью функциональным вчера вечером, и я загрузил его перед сном. Теперь вся страница пуста, и мне нужно, чтобы она была исправлена для моего школьного проекта. По какой-то причине заголовок отображается только на этой странице JSFiddle.HTML Не показывается содержание - Работало недавно
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: Это была глупая ошибка, на мой о не включая JQuery в скрипку, и при загрузке на моем веб-сервере, я должен был использовать локальный файл JQuery. Еще раз спасибо за вашу помощь.
скрипку не включая JQuery - https://jsfiddle.net/qa00rtp1/1/ –
В качестве стороннего я предлагаю вам исследовать образцы СУХОЙ кодировки, поскольку весь ваш код JS можно свести до 10-15 строк. –
'