javascript - 在 div 之间切换语言

Question

我正在开发一个包含 8 种不同语言的简单页面，它只是一个简单的单页纸。

所有不同语言的文本都设置在带有 style="display:none"的 div 中以隐藏，直到选择语言然后显示具有该特定语言的 div。

目前主要语言是英语，该 div 显示在页面加载时，但是当选择一种语言时会加载英语 div 下的 div，但这需要替换。

我不擅长 Javascript，但在这里找到了一些我实现的代码，但它仍然无法正常工作。

这是JS代码:

<script type="text/javascript">

    var _hidediv = null;
    function toggle_visibility(id) {
        if(_hidediv)
            _hidediv();
        var div = document.getElementById(id);
        div.style.display = 'block';
        _hidediv = function () { div.style.display = 'none'; };
    }

</script> 

在我的语言选择器中，我有以下示例:

<a href="#english" onclick="toggle_visibility('english');">EN</a> | <a href="#spanish" onclick="toggle_visibility('spanish');">ES</a> | <a href="#swedish" onclick="toggle_visibility('swedish');">SV</a> 

我这里做错了什么，默认语言是英文，所以div如下:其他语言有style="display:none"

  <div id="english" style="display:block">

Answer 1

如何使用 CSS 隐藏/显示 div 并仅使用 js/jQuery 更改 body 或任何父元素上的类？

$('button').click(function() {
  $('#body').removeClass().addClass($(this).data('lang'));
});

.lang {
  display: none;
}

#body.en .en {
  display: block;
}

#body.es .es {
  display: block;
}

#body.de .de {
  display: block;
}

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