Question

我正在寻找一种相当简单的解决方案，以显示和隐藏lang =“”指定的DIV（两者之间的切换器）。这不一定太难，但是我是Java语言的初学者，所以找不到任何合适的资源。有人有建议吗？

: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>

Answer 1

您需要选择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之类的数据库。

我也不会使用样式表来实现语言switchig功能。我在多语言平台开发方面没有太多经验，但是恕我直言，样式不应影响网站逻辑。

如果您有任何问题，请随时提问。

编辑： 通常，您不应混用内容，逻辑和样式。您应该始终使用最实用的方法来开发您的网站。如果打算以多种语言提供内容，则应首先考虑您的体系结构。有几种不同的方法可以实现这种目的。互联网上到处都是教程和指南：)快乐编码！

在JS隐藏和显示lang =“”属性之间切换的简单解决方案？

1 个答案: