根据浏览器语言切换 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 标签设置为可见性：隐藏；

寻求有关检测浏览器语言和剥离区域设置（如果提供）的帮助，因此我有一个 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);

在此页面上。

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

Answer 3

首先，你不应该用div包装，你应该直接把属性放在标签上。 其次，如果你在 HTML 中，你可以使用 lang 属性，如果你在 XHTML 中，你可以使用xml:lang属性......这比id更具描述性。 最后，如果可以，最好使用Accept-Language进行服务器端的处理。