html-css-js移动端导航栏底部固定+i18n国际化全局
需求：要做一个移动端的仿照小程序的导航栏页面操作，但是这边加上了i18n国家化，由于页面切换的时候会导致国际化失效，所以写了这篇文章
1.效果
切换页面的时候中英文也会跟着改变，不会导致切换后回到默认的语言
2.实现
首先下载插件jquery-i18n-properties
下载这个压缩后的js文件即可
这个文件还需要jquery.js的支持code.jquery.com/jquery-3.7.1.min.js
新建jquery-3.7.1.min.js文件之后把这个网页全部复制粘贴进去就行了。 
2.1创建i18n文件夹，并且创建language.js和不同语言文件
其中js.properties是默认语言文件，us是英语，tw是中文
主要中英文切换代码如下，写在language.js里面，用法在后面
/* 网站支持的语言种类 */
const webLanguage = ['tw', 'us']/* i18nLanguage = "tw" 设置默认繁体 */
const i18nExecute = (i18nLanguage = "tw") => {console.log(i18nLanguage, '走哪了');if ($.i18n == undefined) return false$.i18n.properties({name: "js", //资源文件名称path: '/i18n/lang/', //资源文件路径mode: 'map', //用Map的方式使用资源文件中的值language: i18nLanguage,callback: function () {/* 替换普通文本 */$("[i18n]").each(function () {$(this).html($.i18n.prop($(this).attr("i18n")))})/* 替换value属性 */$("[i18n-v]").each(function () {$(this).val($.i18n.prop($(this).attr("i18n-v")))})/* 替换placeholder属性 */$("[i18n-p]").each(function () {$(this).attr("placeholder", $.i18n.prop($(this).attr("i18n-p")))})}});
}/* 获取文本 */
const i18nProp = function (value) {if ($.i18n == undefined) return falsereturn $.i18n.prop(value)
}$(function () {i18nExecute()
})
内容如下 ，这边我写了俩个测试的中英文版
2.2编写页面内容
注意！！jquery.js一定要在这俩个插件的前面，不然报错
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" type="text/css" href="./pulice.css" /></head><body><div class="box"><span i18n="password"></span><button onclick="i18nToggel()">中英文切换</button><div class="tabbar"><a href="home.html" class="tab"><span>首页</span></a><a href="02.html" class="tab"><span>用户</span></a></div></div><script src="./jquery-3.2.1.min.js"></script><script src="./i18n/jquery.i18n.properties-min.js"></script><script src="./i18n/language.js"></script></body>
</html>
确实是实现了
2.3language的完整代码如下
/* 网站支持的语言种类 */
const webLanguage = ['tw', 'us']/* i18nLanguage = "tw" 设置默认繁体 */
const i18nExecute = (i18nLanguage = "tw") => {console.log(i18nLanguage, '走哪了');if ($.i18n == undefined) return false$.i18n.properties({name: "js", //资源文件名称path: '/i18n/lang/', //资源文件路径mode: 'map', //用Map的方式使用资源文件中的值language: i18nLanguage,callback: function () {/* 替换普通文本 */$("[i18n]").each(function () {$(this).html($.i18n.prop($(this).attr("i18n")))})/* 替换value属性 */$("[i18n-v]").each(function () {$(this).val($.i18n.prop($(this).attr("i18n-v")))})/* 替换placeholder属性 */$("[i18n-p]").each(function () {$(this).attr("placeholder", $.i18n.prop($(this).attr("i18n-p")))})}});
}/* 获取文本 */
const i18nProp = function (value) {if ($.i18n == undefined) return falsereturn $.i18n.prop(value)
}// 中英文切换
let flagI18n = false;
function i18nToggel() {flagI18n = !flagI18n;console.log(flagI18n)localStorage.setItem('i18n', JSON.stringify(flagI18n))if (flagI18n) {i18nExecute('us')} else {i18nExecute('tw')}
}
let i18n = ''
// 解决刷新后数据回到默认语言问题
function query() {if (localStorage.key('i18n')) {i18n = JSON.parse(localStorage.getItem('i18n'))flagI18n = i18n;if (i18n) {console.log('ces111');i18nExecute('us')} else {console.log('ces22');i18nExecute('tw')}}}
query();
function routerHref(item) {console.log(flagI18n, '怎么搞成永久的');}2.4底部固定导航栏的css样式如下
html,
body {width: 100%;height: 100%;
}
* {padding: 0px;margin: 0px;
}
.box {height: 100%;width: 99%;border: 1px solid red;
}
.tabbar {height: 50px;display: flex;justify-content: space-evenly;align-items: center;box-sizing: border-box;padding: 10px;background-color: #e2dfdf;width: 100%;position: fixed;z-index: 1000;left: 0;bottom: 0;
}
ps：如果是原生写的要打包成app需要后端使用nginx进行配置，并且前端不需要再写端口和域名这些，后端发的端口域名仅作为调试使用，线上直接用手机上的默认端口域名去请求就可以了请求如下
let serveUrl = '/index/login'
axios.post(serveUrl).then(res=>{})文章到此结束希望对你有所帮助~
相关文章：
html-css-js移动端导航栏底部固定+i18n国际化全局
需求：要做一个移动端的仿照小程序的导航栏页面操作，但是这边加上了i18n国家化，由于页面切换的时候会导致国际化失效，所以写了这篇文章 1.效果 切换页面的时候中英文也会跟着改变，不会导致切换后回到默认的语言 2.实现…...
Ubuntu Linux 入门指南：面向初学者
目录 1. Ubuntu Linux 简介 Ubuntu 的由来 Ubuntu 与其他 Linux 发行版的比较 Debian： Fedora： openSUSE： Arch Linux： Linux Mint： 第二部分：安装 Ubuntu 1. 准备安装 系统需求 创建 Ubuntu 启…...
常见算法面试题目
前言 总结一些常见的算法题目，每一个题目写一行思路，方便大家复习。具体题目的来源是下面的网站。 剑指offer 剑指offe2 leetcode200题 leetcode 100题 leetcode150题 leetcode 75题 文章目录 前言二叉树非递归遍历牛客JZ31 栈的压入、弹出序列 (…...
PiflowX组件-JDBCWrite
JDBCWrite组件 组件说明 使用JDBC驱动向任意类型的关系型数据库写入数据。 计算引擎 flink 有界性 Sink: Batch Sink: Streaming Append & Upsert Mode 组件分组 Jdbc 端口 Inport：默认端口 outport：默认端口 组件属性 名称展示名称默…...
算法导论复习题目
这题需要考虑什么呢？ 一换元，二要使用主方法猜出结果，三是证明的时候添加一个低阶项来消除 LC检索 C（x）是从上帝视角来看的成本 对C(x)的一个估计： 由两个部分组成，就相当于由以往的经验对未来…...
HTTPS协议详解
目录 前言 一、HTTPS协议 1、加密是什么 2、为什么要加密 二、常见加密方式 1、对称加密 2、非对称加密 三、数据摘要与数据指纹 1、数据摘要 2、数据指纹 四、HTTPS加密策略探究 1、只使用对称加密 2、只使用非对称加密 3、双方都使用非对称加密 4、对称加密非…...
菜鸟学习vue3笔记-vue3 router回顾
1、路由router pnpm i vue-router2、创建使用环境 1.src下创建 router文件夹、里面创建index.ts文件 //创建一个路由暴露出去//1.引入createRouter import { createRouter, createWebHistory } from "vue-router";// import Home from ../components/Home.vue//…...
Mybatis枚举类型处理和类型处理器
专栏精选 引入Mybatis Mybatis的快速入门 Mybatis的增删改查扩展功能说明 mapper映射的参数和结果 Mybatis复杂类型的结果映射 Mybatis基于注解的结果映射 Mybatis枚举类型处理和类型处理器 再谈动态SQL Mybatis配置入门 Mybatis行为配置之Ⅰ—缓存 Mybatis行为配置…...
2023 NCTF writeup
CRYPTO Sign 直接给了fx,gx，等于私钥给了，直接套代码，具体可以参考： https://0xffff.one/d/1424 fx [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0…...
golang的大杀器协程goroutine
在Golang中，协程（Goroutine）是轻量级的执行单元，用于实现并发编程。它是Golang语言的重要组成部分，提供了简洁、高效的方式来处理并发任务。 特点： 1）轻量级：Go语言的协程是轻量级…...
[Angular] 笔记 9：list/detail 页面以及@Output
1. Output input 好比重力，向下传递数据，list 传给 detail，smart 组件传给 dumb 组件，父组件传给子组件。input 顾名思义，输入数据给组件。 output 与之相反，好比火箭，向上传递数据或事件。ou…...
Linux学习笔记(一)
如果有自己的物理服务器请先查看这篇文章 文章目录 网卡配置Linux基础指令ls:列出目录内容cd(mkdir.rmkdir): 切换文件夹(创建,删除操作)cp:复制文件或目录mv:文件/文件夹移动cat:查看文件vi:文件查看编辑man:查看命令手册more: 查看文件内容less : 查看文件内容 ps: 显示当前进…...
Python 爬虫 教程
python爬虫框架：Scrapyd，Feapder，Gerapy 参考文章： python爬虫工程师，如何从零开始部署ScrapydFeapderGerapy？ - 知乎 神器！五分钟完成大型爬虫项目 - 知乎 爬虫框架-feapder - 知乎 scrap…...
uniapp原生插件 - android原生插件打包流程 （ 避坑指南一）
【彩带- 避坑知识点】: 当时开发中安卓插件打包成功后，uniapp引用插件aar，用云打包 ，总是提示不包含插件。原因是因为module的androidManifest.xml文件没有注册activity。 这一步 很重要，一定要注册。 --------------------------…...
搭建maven私服
maven maven简介 什么是maven？ Maven这个单词来自于意第绪语（犹太语），意为知识的积累。 Maven项目对象模型(POM)，可以通过一小段描述信息来管理项目的构建，报告和文档的项目管理工具软件。 Maven 除了以…...
EST-100身份证社保卡签批屏按捺终端PC版web版本http协议接口文档，支持web网页开发对接使用
<!DOCTYPE html><html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width,initial-scale1.0"><title>演示DEMO</title><script type"text/…...
基于SpringBoot的毕业论文管理系统
文章目录 项目介绍主要功能截图：部分代码展示设计总结项目获取方式🍅 作者主页：超级无敌暴龙战士塔塔开 🍅 简介：Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我，都给你】 🍅文末获取源码联系🍅 项目介绍 基于SpringBoot的毕业论文管理系统,java…...
iToF人脸识别
iToF（间接飞行时间）是一种测量光飞行时间的技术，主要应用于人脸识别。 iToF人脸识别技术在哪些场景下会用到 iToF人脸识别技术可以应用于许多场景，以下是一些常见的应用场景： 平安城市：在城市监控系统中，iToF人脸识别技术可以用于实时监控、目标检测和识别，以及异常行为…...
Django开发3
Django开发3 Django开发编辑用户9.靓号管理9.1 表结构9.2 靓号列表9.3 新建靓号9.4 编辑靓号9.5 搜索手机号9.6 分页 10.时间插件11.ModelForm和BootStrap操作 各位小伙伴想要博客相关资料的话关注公众号：chuanyeTry即可领取相关资料！ Django开发 部门管…...
MS2358：96KHz、24bit 音频 ADC
产品简述 MS2358 是带有采样速率 8kHz-96kHz 的立体声音频模数 转换器，适合于面向消费者的专业音频系统。 MS2358 通过使用增强型双位 Δ - ∑ 技术来实现其高精度 的特点。 MS2358 支持单端的模拟输入，所以不需要外部器 件，非常适…...
从FreeRTOS到RT-Thread：手把手教你正确使用操作系统的动态内存API（避坑malloc）
从FreeRTOS到RT-Thread：嵌入式实时操作系统动态内存管理实战指南 在嵌入式开发领域，动态内存管理一直是开发者面临的棘手问题之一。当项目从裸机迁移到实时操作系统（RTOS）环境时，许多开发者会不自觉地延续使用标准C库的…...
【运维篇 / 实战】❀ 邮件告警的自动化配置与故障排查 ❀ FortiGate 防火墙
1. 邮件告警功能的价值与场景 想象一下这样的场景：凌晨三点，公司防火墙突然检测到大规模DDoS攻击，而此时所有运维人员都在睡梦中。等到第二天上班才发现，业务系统已经瘫痪了整整五个小时。这种"事后诸葛亮"的窘境&…...
Taotoken用量看板如何帮助团队管理大模型API成本
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 Taotoken用量看板如何帮助团队管理大模型API成本 作为团队的技术负责人，在引入大模型能力支持多个项目时，一…...
知识竞赛的“锦囊”设计：场外求助、免答权、双倍分
🧧 知识竞赛的“锦囊”设计：场外求助、免答权、双倍分救命稻草 策略博弈 让竞赛悬念迭起💎 一、锦囊设计的核心价值在知识竞赛中，锦囊不仅是选手的“救命稻草”，更是增加节目悬念、提升观众参与感的关键元素。合理设…...
极简fastapi框架
# 自己手写一个极简版 FastAPI 框架 class MiniFastAPI:def __init__(self):# 路由表：存储 {("GET", "/url1"): 对应函数}self.router_map {}# 模仿 app.get("/path") 装饰器def get(self, path: str):def decorator(func):# 把 请求…...
2026openclaw+hermes agent 安装指南3.0版
2026 年人工智能行业悄然完成了一场意义深远的战略转向。曾经如火如荼的纯对话大模型参数规模竞赛已成为过去，能够真正解决实际问题、具备落地执行能力的自主智能体，正式登上了历史舞台的中央，成为新一代生产力工具的核心驱动力。 在众多开源…...
Sunshine游戏串流服务器：打造你的私人云游戏平台
Sunshine游戏串流服务器：打造你的私人云游戏平台 【免费下载链接】Sunshine Self-hosted game stream host for Moonlight. 项目地址: https://gitcode.com/GitHub_Trending/su/Sunshine 想要在客厅电视、笔记本电脑甚至手机上玩高性能PC游戏吗？S…...
从稀疏重构到精准定位：OMP-CS算法在DOA估计中的实战解析
1. 从稀疏信号到空间定位：OMP-CS算法的核心逻辑 第一次接触OMP-CS算法时，我盯着那堆数学公式发呆了半小时。直到把天线阵列想象成麦克风阵列，事情突然变得简单——这不就是通过多个麦克风判断声音方向的升级版吗？在雷达和通信系统…...
ITK-SNAP医学图像分割：精准医疗影像分析的利器
ITK-SNAP医学图像分割：精准医疗影像分析的利器 【免费下载链接】itksnap ITK-SNAP medical image segmentation tool 项目地址: https://gitcode.com/gh_mirrors/it/itksnap 面对复杂的医学影像数据，如何快速准确地进行三维解剖结构分割ÿ…...
烟草叶部病害-目标检测数据集（包括VOC格式、YOLO格式）
烟草叶部病害-目标检测数据集（包括VOC格式、YOLO格式） 数据集（文章最后关注公众号获取数据集）： 链接: https://pan.baidu.com/s/1-4LCiMULEf7OT9JHzL38BQ?pwdytbu 提取码: ytbu 数据集信息介绍： 共有 156…...