Refactor js

This commit is contained in:
emily 2024-09-22 18:36:19 +02:00
parent d6b75a73fd
commit f4e46ff682
Signed by: emily
GPG key ID: F6F4C66207FCF995
2 changed files with 12 additions and 20 deletions

View file

@ -30,20 +30,12 @@ document.getElementById("hint").addEventListener('click', _ => {
} }
}); });
const sites = ['as', 'home', 'about']; const sites = document.querySelectorAll('[id^=page-]');
sites.forEach((item) => { sites.forEach((site) => {
document.querySelectorAll(`.nav-${item}`).forEach((a) => { site.querySelectorAll('[class^=nav-]').forEach((button) => {
a.addEventListener('click', _ => { button.addEventListener('click', _ => {
nav(item); site.style.display = 'none';
document.querySelector(`#page-${button.className.replace('nav-', '')}`).style.display = '';
}); });
}); });
}); });
function nav(site) {
const bg = [...sites];
bg.splice(sites.indexOf(site), 1);
bg.forEach((item) => {
document.getElementById(item).style.display = 'none';
});
document.getElementById(site).style.display = '';
}

View file

@ -12,15 +12,15 @@
<source src="assets/media/sunnyday-av1.mp4" type="video/mp4;codecs=av01.0.08M.08"> <source src="assets/media/sunnyday-av1.mp4" type="video/mp4;codecs=av01.0.08M.08">
<source src="assets/media/sunnyday-avc.mp4" type="video/mp4;codecs=avc1.4D401F"> <source src="assets/media/sunnyday-avc.mp4" type="video/mp4;codecs=avc1.4D401F">
</video> </video>
<div id="home"> <div id="page-home">
<h1>KYOUMA.NET</h1> <h1>KYOUMA.NET</h1>
<h2>BE GAY DO CRIME</h2> <h2>BE GAY DO CRIME</h2>
<div class="social"> <div class="links">
<a class="nav-as">as203819</a> $ <a class="nav-as203819">as203819</a> $
<a class="nav-about">about</a> <a class="nav-about">about</a>
</div> </div>
</div> </div>
<div class="content" id="as" style="display: none"> <div class="content" id="page-as203819" style="display: none">
<pre> <pre>
________ ________ _______ ________ ________ ________ _____ ________ ________ ________ _______ ________ ________ ________ _____ ________
|\ __ \ |\ ____\ / ___ \ |\ __ \ |\_____ \ |\ __ \ / __ \ |\ ___ \ |\ __ \ |\ ____\ / ___ \ |\ __ \ |\_____ \ |\ __ \ / __ \ |\ ___ \
@ -65,7 +65,7 @@
<a class="nav-home">&lt;- Home</a> <a class="nav-about">about -&gt;</a> <a class="nav-home">&lt;- Home</a> <a class="nav-about">about -&gt;</a>
</pre> </pre>
</div> </div>
<div class="content" id="about" style="display: none"> <div class="content" id="page-about" style="display: none">
<pre> <pre>
________ ________ ________ ___ ___ _________ ________ ________ ________ ___ ___ _________
|\ __ \ |\ __ \ |\ __ \ |\ \|\ \ |\___ ___\ |\ __ \ |\ __ \ |\ __ \ |\ \|\ \ |\___ ___\
@ -107,7 +107,7 @@
| | | | | |
| | | | | |
+-------------------------------------------------------------------------+---------------------------------------+ +-------------------------------------------------------------------------+---------------------------------------+
<a class="nav-home">&lt;- Home</a> <a class="nav-as">as203819 -&gt;</a> <a class="nav-home">&lt;- Home</a> <a class="nav-as203819">as203819 -&gt;</a>
</pre> </pre>
</div> </div>
<div class="hint" id="hint">HIT ME FOR SOUND</div> <div class="hint" id="hint">HIT ME FOR SOUND</div>