jQuery 页面语言切换

最新推荐文章于 2021-05-06 17:10:19 发布

黄河爱浪

最新推荐文章于 2021-05-06 17:10:19 发布

阅读量1.8k

点赞数

分类专栏： jQuery 文章标签：页面语言切换语言切换

本文链接：https://blog.csdn.net/u013350495/article/details/83050897

版权

jQuery 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

上效果图：

源码如下：

<!--
    author:helang
    Email:helang.love@qq.com
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="author" content="helang.love@qq.com">
    <title>jQuery之美——页面语言切换</title>
    <link rel="stylesheet" href="https://mydarling.gitee.io/resource/Bootstrap/css/bootstrap.min.css">
    <style type="text/css">
        .panel-title{
            line-height: 26px;
        }
        .panel-title>select{
            width: 80px;
            height: 26px;
            vertical-align: middle;
            color: #333333;
            float: right;
            font-size: 14px;
            border: none;
        }
    </style>
</head>
<body>
<h1 style="text-align: center;margin: 20px 0;">jQuery之美——页面语言切换</h1>
<div class="container">
    <div class="row">
        <div class="col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <span class="hl-language" data-name="title">登录</span>
                        <select id="changeLanguage">
                            <option value="0">中文</option>
                            <option value="1">English</option>
                        </select>
                    </h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline">
                        <div class="form-group">
                            <label for="exampleInputName2" class="hl-language"  data-name="nickName">昵称</label>
                            <input type="text" class="form-control" id="exampleInputName2" placeholder="helang">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail2" class="hl-language"  data-name="email">邮箱</label>
                            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="helang.love@qq.com">
                        </div>
                        <button type="button" data-name="title" class="btn btn-primary btn-block hl-language">登录</button>
                    </form>
                </div>
                <div class="panel-footer">&copy; 2018 helang.love@qq.com</div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://mydarling.gitee.io/resource/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    var configData={
        "title":['登录','Login'],
        "nickName":['昵称','Name'],
        "email":['邮箱','Email']
    };

    $("#changeLanguage").change(function () {
       var index=$(this).val();
       $(".hl-language").each(function () {
           var _this=$(this);
           _this.html(configData[_this.data("name")][index]);
       })
    });
</script>
</body>
</html>

作者：黄河爱浪 QQ：1846492969，邮箱：helang.love@qq.com

微信公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。

更多精彩文章，请扫下方二维码关注我的公众号

黄河爱浪

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
jQuery 页面语言切换

上效果图：源码如下：<!-- author:helang Email:[email protected]><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" ...
复制链接

扫一扫