abdelyazy
@abdelyazy

Как с помощью js поменять язык на сайте?

Сделал сайт, но нужно при клике менять язык на RU/EN. Как это реализовать с помощью js?
5e5f9f70e9623514027101.png
  • Вопрос задан
  • 3036 просмотров
Пригласить эксперта
Ответы на вопрос 3
Kozack
@Kozack Куратор тега JavaScript
Thinking about a11y
Всё содержимое сайта должно как-то хранится на двух языках.
Можно отмечать на странице все "мультиязычные" элементы, и при переключении языка — обновлять их на лету. Для этого нужно чтобы JS загружал откуда-то весь контент страниц на двух языках. И дополнительно использовать Intl для разных дат, списков, и всего такого.

Но лучше если всё содержимое веб страницы будет генерироваться на сервере в соответствии с выбранным языком. Тогда для переключения языка нужно будет передавать на сервер запрос с параметром. Например это можно оформить как префикс к URL example.com/en/some-path
Ответ написан
Комментировать
sashabeep
@sashabeep
Дней без вопросов про Slick на тостере : 0
На JS...
Ну, допустим, разбить содержимое на контейнеры с атрибутом LANG
<html lang="ru">
...
  <p lang="ru">Текст на русском</p>
  <p lang="en">English text</p>
...

В стилях будет
html[lang="ru"] [lang="en"] {
    display: none;
}
html[lang="en"] [lang="ru"] {
    display: none;
}

Переключатель
<ul class="langswitcher">
  <li class="active"><a href="#ru" data-lang="ru">Ru</a></li>
  <li><a href="#en" data-lang="en">En</a></li>
</ul>

Скрипт будет перекидывать значение атрибута lang у тэга HTML
$(".langswitcher a").on("click",function(e){
		e.preventDefault();
		$(".langswitcher li").removeClass("active");
		$("html").attr("lang",$(this).data("lang"));
		$(this).parent().addClass("active");
	});


Для коротких страниц вполне юзабельно
Ответ написан
Комментировать
@HikariNoSekai
Middle Vue.js Developer
Никто не подумал про масштабируемость... Советую погуглить i18n , а переводы хранить в json для разных языков. На js написать простой скрипт который использует функции i18n для переключения языков
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы