本地环境中使用js完成中英文切换的双语页面开发（jq插件附代码）

最新推荐文章于 2024-07-22 10:03:37 发布

jcat_李小黑

最新推荐文章于 2024-07-22 10:03:37 发布

阅读量2.4k

点赞数 4

分类专栏： JavaScript 文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_43216105/article/details/109779404

版权

本文介绍了如何在本地环境中实现中英文切换的双语页面，通过jQuery实现，避免了i18n的跨域问题。核心思路包括：页面加载时从cookie或webstorage获取默认语言，定义对应中英文JSON文件，为DOM元素添加数据属性以匹配语言，并编写匹配方法。提供完整代码示例，适用于前端本地开发中英文切换场景。

摘要由CSDN通过智能技术生成

前言

前端本地如何支持中英文切换的双语页面？这个的方法可以延展很多，常见的是i18n，最粗暴的解决方法写两个页面。但是各有利弊，使用i18n请求本地json数据在谷歌中会报跨域，必须请求服务器端。此篇就是解决下：如何在本地开发中英文切换！

正文

1.页面

功能：默认进入页面为中文，点击中英文切换数据；
效果：
在这里插入图片描述

2. 代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <button class="iscn">中 文</button>
    <button class="isen">English</button>
    <ul>
      <li lang