根据浏览器语言切换div标签的可见性

Question

首先，我是PM，开发团队已经对我生气了。所以我想拍摄下面问题的解决方案。

我们有一个静态维护模式html页面，以24种语言显示“请尽快回来”。现在我们一次显示所有24个翻译，页面非常难看。

我已将每个翻译包装到它自己的div标签中，如下所示：

<div id="en">
  <p>Please check back soon</p>
</div>
<div id="es">
  <p>Compruebe por favor más adelante</p>
</div>
...

我希望使用javascript来检测浏览器语言并设置可见性：可见;对应于浏览器语言的div。并将所有其他div标记设置为visibility：hidden;

寻求帮助检测浏览器语言并删除语言环境（如果提供），这样我就可以在复杂的开关中使用2个字符值。

Answer 1

我的解决方案是使用HTTP请求中的Accept-Language标头来查找用户的首选语言，然后以正确的语言返回一个div。这样你就不用担心隐藏div了。此外，如果您隐藏div，它们将最初显示，然后仅在Javascript执行后设置为隐藏，因此它不会像用户体验那样好。

请参阅：http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html

Answer 2

首先，这似乎是服务器端解决方案而不是客户端解决方案。但是，快速搜索确实出现了这个片段：

var userLang = (navigator.language) ? navigator.language : navigator.userLanguage;
alert ("The language is: " + userLang);

on this page。

因此，如果您真的必须在客户端上执行此操作，那么这可能有所帮助。

Answer 3

首先，你不应该在div中包装，你应该直接将属性放在标签上。 其次，如果您使用的是HTML，则可以使用lang属性，如果您使用的是XHTML，则可以使用xml：lang属性...这比“id”更具描述性。 最后，如果可以的话，最好使用Accept-Language

来处理服务器端