1. 程式人生 > >前端多語言切換

前端多語言切換

-- 默認 coo 中文 oct body bin art change

比較笨的方法,就是把所有的語言寫好,放在同一個頁面,加上不同的class,用jquery控制class的顯示和隱藏。
將控制語言的開關switch存在cookie裏。為了避免頁面同時加載所有語言,可以先讓頁面隱藏,用jquery控制延遲顯示。

(註意:需要搭建服務,直接運行不好使)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>語言切換</title>
</head>
<
body style="display:none"> <!-- 需要搭建服務器,才能運行 --> <ul class="dropdown-menu dropdown-menu-right" style="min-width: 80px;margin-right: -8px;margin-top: 2px;"> <li> <a tabindex="-1" href="javascript:;" id="change-ch"><span class="ishow_ch">中文</
span><span class="ishow_hw">??</span><span class="ishow_en">Chinese</span></a> </li> <li> <a tabindex="-1" href="javascript:;" id="change-hw"><span class="ishow_ch">韓文</span><span class="ishow_hw">??</span><span
class="ishow_en">Korean</span></a> </li> <li> <a tabindex="-1" href="javascript:;" id="change-en"><span class="ishow_ch">英文</span><span class="ishow_hw">??</span><span class="ishow_en">English</span></a> </li> </ul> <script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <!------------------- 語言切換邏輯實現 Start -------------------> <script> //避免同時加載多個語言 $(body).show(300); $(#change-ch).click(on,function(){ $.cookie(switch, 0, { expires: 30 }); location.reload(); }) $(#change-en).click(on,function(){ $.cookie(switch, 1, { expires: 30 }); location.reload(); }) $(#change-hw).click(on,function(){ $.cookie(switch, 2, { expires: 30 }); location.reload(); }) $(function(){ //默認顯示英文 $(.ishow_ch).hide(); $(.ishow_hw).hide(); $(.ishow_en).show(); //switch === 0 顯示中文 if($.cookie(switch) == 0){ $(.ishow_en).hide(); $(.ishow_hw).hide(); $(.ishow_ch).show(); //switch === 1 顯示英文 }else if($.cookie(switch) == 1){ $(.ishow_ch).hide(); $(.ishow_hw).hide(); $(.ishow_en).show(); //switch === 2 顯示韓文 }else if($.cookie(switch) == 2){ $(.ishow_ch).hide(); $(.ishow_en).hide(); $(.ishow_hw).show(); } }) </script> <!----------------- 語言切換邏輯實現 End -------------------------> </body> </html>

前端多語言切換