最近弄的項目是面向國際的,所以老總說要有語言切換功能.第一感覺好像不難吧

網上查了下,感覺實現方法就2種:

一:2個版本的HTML.至于怎么切換,方法也很多.

不過這種方法,除了笨,我實在不知道用什么詞來形容.

二:雙重標簽,一個中文一個英語,之后用css來控制DOM的display,從而來判斷顯示那種語言.

English

中文

document.getElementById('E').style.display?=?"block"

document.getElementById('Z').style.display?=?"none"

這種方法,雖然好像不錯,不過當頁面多了,以后不好管理,也會造成頁面的臃腫.

所以到頭來還是自己搞吧.既然我那么喜歡JavaScript,為啥不用JavaScript來實現呢.

其實,原理也不難,傳2個參數,一個是英文文本,一個是中文文本,之后判斷一個全局變量來決定是中譯英還是英譯中.

直接上代碼先:

function?instead_of_language(oldLan,?newLan)?{

var?temp,

all?=?document.querySelectorAll(".change_lan");

if?(change_lan_Z?==?0)?{

temp?=?newLan;

newLan?=?oldLan;

oldLan?=?temp;

}

for?(i?=?all.length;?i--;)?{

if?(all[i].getAttribute("placeholder")?==?oldLan)?{

all[i].setAttribute("placeholder",?newLan);

}

if?(all[i].innerHTML?==?oldLan)?{

all[i].innerHTML?=?newLan;

}

if?(all[i].value?==?oldLan)?{

all[i].value?=?newLan;

}

}

}

用法:

//HTML

Update??????//??給翻譯的標簽加上class值"change_lan"

//JavaScript

var?change_lan_Z?=?0;??????????????????????//???change_lan_Z等于1時為中譯英??等于0時為英譯中

instead_of_language("Update",?"更新");?????//????判斷的是字符串,所以包括空格或者符號都要加上去

這也是剛剛才寫的函數,還不是很完善,目前只是支持翻譯標簽的文本和input的placeholder屬性.

如果各位有發現什么好的改進 ?或者是BUG的話,歡迎指導批評

總結

以上是生活随笔為你收集整理的html怎么实现多语言图片切换,JavaScript实现--中英语言切换功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。