Question

我正在用8种不同的语言制作一个简单的页面，它只是一个简单的单页页面。

所有不同语言的文本都在div中设置，样式为“ display：none”，以便隐藏，直到选择语言，然后显示具有该特定语言的div。

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

我的Java语言不好，但是在这里找到了一些我实现的代码，但是仍然无法正常工作。

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

Answer 2

基于jQuery的解决方案将在此示例中工作：https://codepen.io/shikifujin/pen/PowqOjB

您为.language（默认隐藏）和.language.active（可见）创建CSS类：

div.language {
  display: none;
}

div.language.active {
  display: block;
}

然后，使用具有 id = 属性（包含内容的语言）的内容创建所有具有这样的内容的语言div（仅向默认类别提供active类） >：

  <div id="english" class="language active">
    english content
  </div>
  <div id="spanish" class="language">
    contenido en español
  </div>

然后，您需要在文档中提供jQuery，以及下面的<script>才能使语言切换生效。加载DOM后，所有.switch-language元素（不一定需要）都需要具有 id = 属性，以指定语言切换到（与相应div的ID完全匹配）：

  <a href="#" id="english" class="switch-language">EN</a>

一旦加载了整个DOM，或者在显示了内容和切换元素之后，就可以通过以下操作来处理切换器中的任何单击，从而启用切换器：

让语言从 id （switchTo）
隐藏所有内容div
显示所需的名称（带有 id switchTo）这也可以使用香草javascript完成，但我选择使用jQuery：

<script>
$(document).ready(function() {
  $(".switch-language").on("click", function() {
    var switchTo = $(this).data("language");
    $(".language").hide();
    $(".language#" + switchTo).show();
  });
});
</script>

同样，您可以在这里尝试：https://codepen.io/shikifujin/pen/PowqOjB

Answer 3

您还需要处理English语言的默认情况。只是缺少了。

    var _hidediv = null;

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

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>

Answer 4

代码中的问题

_hidediv永远不会触发，因为它始终为空。
您在_hidediv中使用的逻辑是错误的。应该将div.style.display ='none'设置为除您作为'toggle_visibility（id）'中的参数传递的div以外的其他div。根据您的代码，即使您成功启动_hidediv函数，它也会将目标div从div.style.display ='block'重置为div.style.display ='none'。

在div之间切换语言

4 个答案: