快速教你实现网页中文英文语言切换(完整DEMO)
1:留意代码中红色部分!
2:网页公共底部引入js
<script src="https://unpkg.zhimg.com/jquery@3.5.0/dist/jquery.min.js"></script> <script src="你的路径/translate.js"></script>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="theme-color" content="#e9f1e9"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>网站翻译DEMO</title> <!-- Bootstrap --> <link href="https://unpkg.zhimg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="css/x-az.css" rel="stylesheet"> <link rel="icon" href="./favicon.ico"> </head> <body> <nav class="navbar navbar-expand-lg navbar-light fixed-top"> <div class="container"> <a class="navbar-brand" href="#"> <span id="t1">xuanzhi33<span en="'s website">的小站</span><a href="#" class="transBtn">点我翻译</a></span> </a> </div> </nav> <br> <br> <br> <div class="container"> <div class="row text-center"> <div class="col-xl-4 pb-3 pb-xl-0"> <div class="card glass"> <div class="card-body"> <h5 class="card-title welcome_msg" en="loading">加载中...</h5> <p class="card-text"><span class="point_msg"><span en="Looking up your points...">正在查询您的积分……</span></span><br> <a href="../board/?from=../" en="Board">留言板</a> <a href="https://api.***.cn/user/" en="Account">用户中心</a> <a href="#" onclick="location.reload()" en="Refresh">刷新首页</a> </p> <a href="../sign/?from=../" class="btn btn-success btn-block" en="Get points">每日签到领积分</a> </div> </div> </div> </div> <br> <script src="https://unpkg.zhimg.com/jquery@3.5.0/dist/jquery.min.js"></script> <script src="js/translate.js"></script> <script src="https://unpkg.zhimg.com/bootstrap@4.4.1/dist/js/bootstrap.min.js"></script> </body> </html>
translate.js下载(如下图): 群文件地址