Je travaille sur une page simple avec 8 langues différentes, c'est juste un simple sacrer.
Tout le texte dans les différentes langues sont définis dans DIVS avec un style = "Affichage: Aucun" pour être masqué, jusqu'à ce que La langue est choisie alors la DIV avec cette langue particulière est montrée. P>
Actuellement, la langue principale est l'anglais et que DIV est indiqué sur PAGLOAD, mais lors de la sélection d'une langue chargera la DIV sous l'anglais div, mais cette doivent être remplacés. P>
Je ne suis pas bon en JavaScript, mais j'ai trouvé des codes ici que j'ai mis en œuvre, mais cela ne fonctionne toujours pas comme il devrait être. P>
C'est le JS Code: p> et dans mon sélecteur de langue, j'ai le suivant comme exemple: p> Qu'est-ce que je fais mal Ici, la langue par défaut est l'anglais, de sorte que la div est la suivante: et les autres langues ont style = "Affichage: Aucun" P> <div id="english" style="display:block">
4 Réponses :
Que diriez-vous d'utiliser CSS pour masquer / afficher les divs et utilisez uniquement JS / JQuery pour modifier une classe sur p> Corps code> ou n'importe quel élément parent?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="body" class="en">
<button data-lang="en">English</button>
<button data-lang="es">Spanish</button>
<button data-lang="de">German</button>
<div class="lang en">English</div>
<div class="lang es">Spanish</div>
<div class="lang de">German</div>
<br/>
<div class="lang en">English 2</div>
<div class="lang es">Spanish 2</div>
<div class="lang de">German 2</div>
</div>
Vous devez gérer le cas par défaut de p> anglais code> aussi. Seulement c'est manquant.
Language:
<a href="#english" onclick="toggle_visibility('english')">English</a>
<a href="#spanish" onclick="toggle_visibility('spanish')">Spanish</a>
<a href="#hindi" onclick="toggle_visibility('hindi')">Hindi</a>
<a href="#french" onclick="toggle_visibility('french')">French</a>
<div id="content">
<div id="english">
English
</div>
<div id="spanish" style="display: none;">
Spanish
</div>
<div id="hindi" style="display: none;">
Hindi
</div>
<div id="french" style="display: none;">
French
</div>
</div>
problèmes dans votre code
Une solution basée sur JQuery fonctionnerait comme dans cet exemple: https://codepen.io/shikifujin / stylo / powqojb
Vous créez des classes CSS pour .Language code> (masqué par défaut) et .Language.active code> (visible): P > <script>
$(document).ready(function() {
$(".switch-language").on("click", function() {
var switchTo = $(this).data("language");
$(".language").hide();
$(".language#" + switchTo).show();
});
});
</script>
Pour être clair, vous voulez que l'anglais div soit enlevé / masqué lorsqu'une autre langue est sélectionnée?
Oui, c'est la valeur par défaut et si les gens veulent leur propre langue, les DIV avec leur langue doivent montrer
Cool. Est-ce juste un
div par langue ou multiple sur la page? Cela affectera la solution.Un div par langue:
D'ACCORD. Une dernière question - peut-être - les divs sont-ils enveloppés dans un élément parent commun comme
Oui ces divs sont enveloppés dans un parent div
Le parent div est juste pour le placement sur la page