zoukankan      html  css  js  c++  java
  • 前端多语言切换

    比较笨的方法,就是把所有的语言写好,放在同一个页面,加上不同的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- 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>
  • 相关阅读:
    springMVC入门
    【终极指南】图文详解Chrome插件离线安装方法
    IDM下载器使用方法详解:百度网盘下载,视频会员一网打尽!
    Mac下复制粘贴的快捷键是什么?随记
    华为手机维修点查询终于上线了
    如何将已经安装从chrome扩展程序导出备份为.CRX文件?
    Chrome浏览器 v68.0.3440.106 正式版怎么样?
    Postman插件如何安装
    分享一款非常好用的Fatkun图片批量下载工具
    上海苹果维修点分享苹果电脑MACBOOK故障维修常见案例
  • 原文地址:https://www.cnblogs.com/wrongcode/p/10584113.html
Copyright © 2011-2022 走看看