Sprachwechsel via JavaScript Link
Ich erstelle eine Dokumentation in Form von HTML-Seiten für meinen Verein und möchte diese in mehreren Sprachen zur Verfügung stellen. Hierfür hätte ich gerne ein Dropdown zur Sprachauswahl.
Dass die Mitglieder ein wenig Komfort haben, wenn sie zwischen den Sprachen wechseln möchten, hätte ich das gerne mit JavaScript realisiert. Das Ganze soll folgendermaßen funktionieren:
Ich baue auf dem Webserver eine Ordnerstruktur auf, die pro Sprache gleich ist, z.B.
Wenn ich mich in der Deutschen Doku befinde und aus dem Dropdown die Sprache Englisch auswähle, soll sich das Skript wie folgt verhalten.
Gehe in der Ordnerstruktur nach oben, bis du einen Ordner findest, der EN heißt.
Suche in diesem Ordner und seinen Unterordnern eine Datei mit gleichem Namen und zeige sie an.
Natürlich soll der Weg in alle Richtungen funktionieren, also auch von EN nach DE und evtl. wenn ich jemanden finde, der mir das ganze auch noch in eine Drittsprache übersetzt auch erweiterbar ist.
Der hier verwendete Code
<style>
#wechseln{
display:none;
position:absolute;
left:-20000px;
}
#box{
height:50px;
}
#wechseln:checked ~ #box > #englisch{
display:block;
}
#wechseln:checked ~ #box > #deutsch{
display:none;
}
#wechseln ~ label > #togerman{
display:none;
}
#wechseln:checked ~ label > #togerman{
display:block;
}
#wechseln:checked ~ label > #toenglisch{
display:none;
}
#box > #englisch{
display:none;
}
#box > #deutsch{
display:block;
}
label{
padding:2px 5px;
border:1px solid grey;
background:lightgrey;
cursor:pointer;
display:flex;
width:200px;
box-shadow:2px 2px grey;
}
label:active{
box-shadow:-2px -2px grey;
}
label > span{
margin:0 4px;
}
</style>
<input type="checkbox" id="wechseln">
<div class="aus" id="box">
<div id="englisch">Englischer text</div>
<div id="deutsch">Deutscher text</div>
</div>
<label for="wechseln">Sprache wechseln in<span id="toenglisch">Englisch</span><span id="togerman">Deutsch</span></label>