关于在静态html中实现语言切换的思路与实现

缘由

有一个同事好像是在做vc桌面应用程序，内嵌的浏览器内核来实现界面。在项目中有一个实现多语言的需求，他不太懂前端的知识，自己通过学习实现了通过用js来切换语言，语言是在json中定义的。默认的语言是中文，是直接写在html中的，当切换语言的时候是通过包裹在jquery的document ready里来加载其它语言。这样出现了一个问题，如果页面内容元素多的话可能闪一下，即：先显示一下中文随即就切换了，他们感觉不爽，也影响体验，决定寻求其它的方法。于是不知道通过哪个同事，找到了我。很荣幸让我有机会也学习一下

思路

同事在项目中只用到了三种语言：英文、中文简体、中文繁体。所以我首先想到了最笨的方法：1.直接将三种语言写在html中，显示当前设置的语言隐藏其它两种来实现。2.使用css伪元素的content:attr(en)形式，将语言写在元素属性中，这种也是一种笨方法。3.前两种由于自己觉得不够完美不适合更多语言的情况，所以又想到了一种更方便一点的方法，原理与第2种类似。

实现

说明：以下所代码自己测试在firefox新版本和ie8中有效，如果自己测试兼容性不好，请网友们自己改一下代码吧

文档目录

languagetest/

├───test.html

├───zh.css
</