Блог

Я ищу довольно простое решение для отображения и скрытия lang =»» указанных DIV (переключатель между ними). Это не должно быть слишком сложно, но я новичок в Javascript, и я не смог найти никаких подходящих ресурсов. У кого-нибудь есть предложения?

 :lang(eng) {
  display: block;
}

:lang(de) {
  display: none;
}

button {
  width:100px;
  height: 50px;
  background-color: blue;
}
button: active{
  background-color: green;
}

#example :lang(eng){
  width: 100vw;
  text-align: center;
  height: 50vh;
  background-color: yellow;
}
#example :lang(de){
  width: 100vw;
  text-align: center;
  height: 50vh;
  background-color: red;
}  

 <button onclick="myFunction()">English</button>
<button onclick="myFunction()">German</button>
<div id="example" lang="eng">
    <p>DIV with English text</p>
</div>
<div id="example" lang="de">
    <p>DIV with German text</p>
</div>  

Вам нужно выбрать HTML Element и установить конкретный атрибут и вставить текст:

 const texts = { 
  "de": 'deutscher text',
  "en-us": 'english text'
}
function selectLanguage(lang) {
  const element = document.getElementById('example')
  element.setAttribute("lang", lang)
  element.innerHTML = texts[lang]
  console.log(document.getElementById('example'))
}  

     <button onclick="selectLanguage('de')">German</button>
    <button onclick="selectLanguage('en-us')">English</button>
    <div id="example">
        <p>Text</p>
    </div>  

Обратите внимание, что здесь я сохраняю тексты в простом объекте. Обычный способ хранения текстов, которые должны быть доступны на нескольких языках, — использовать базу данных, такую как mysql или MongoDB.

Я бы также не стал использовать таблицы стилей для реализации функции переключения языков. У меня не так много опыта в разработке многоязычных платформ, но имхо стили не должны влиять на логику веб-сайтов.

Если у вас есть какие-либо вопросы, не стесняйтесь спрашивать.

Редактировать: как правило, вы не должны смешивать содержимое, логику и стили. Вы всегда должны использовать наиболее практичный способ разработки своего веб-сайта. Если вы собираетесь предоставлять свой контент на нескольких языках, вам следует сначала подумать о своей архитектуре. Есть несколько разных способов добиться такого рода вещей. В Интернете полно руководств и руководств 🙂 Счастливого кодирования!