前端多語言切換


比較笨的方法,就是把所有的語言寫好,放在同一個頁面,加上不同的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').fadeIn(500); 

$('#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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM