lizixuan/webs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更改所有页面中英文切换样式及JS功能代码 所有页面logo图片不切换

Browse Source
This commit is contained in:
yaoqin
2025-05-08 17:04:34 +08:00
parent 3923e4df10
commit 602ee741e0
17 changed files with 1443 additions and 583 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
hanJing/js/mainBusiness.js
View File

@@ -118,30 +118,50 @@ document.addEventListener('DOMContentLoaded', function () {
let currentLang = localStorage.getItem('siteLang') || "zh";
// 语言显示更新函数
function updateLanguageDisplay(lang) {
const currentFlag = document.getElementById('current-flag');
const currentLangText = document.getElementById('current-lang');
if (currentFlag && currentLangText) {
if (lang === 'en') {
currentFlag.src = '../imgs/flags/en.svg';
currentLangText.textContent = 'English';
} else {
currentFlag.src = '../imgs/flags/zh.svg';
currentLangText.textContent = '简体中文';
}
}
}
function applyLang(lang) {
const data = langData[lang];
// logo
document.getElementById("footerLogo").src = data.logo;
// const footerLogo = document.getElementById("footerLogo");
// if (footerLogo) footerLogo.src = data.logo;
// 页面内容
document.getElementById("title").textContent = data.title;
const titleElement = document.getElementById("title");
if (titleElement) titleElement.textContent = data.title;
// 顶部标题和描述
document.querySelector('.topBannerLeftTitle p:nth-child(1)').textContent = data.topBannerTitle;
document.querySelector('.topBannerLeftTitle p:nth-child(2)').textContent = data.topBannerDesc;
const topBannerTitle = document.querySelector('.topBannerLeftTitle p:nth-child(1)');
if (topBannerTitle) topBannerTitle.textContent = data.topBannerTitle;
const topBannerDesc = document.querySelector('.topBannerLeftTitle p:nth-child(2)');
if (topBannerDesc) topBannerDesc.textContent = data.topBannerDesc;
// 手风琴
const accordionItems = document.querySelectorAll('.accordion-item');
data.accordion.forEach((item, idx) => {
if (accordionItems[idx]) {
accordionItems[idx].querySelector('.accordion-header h3').textContent = item.title;
accordionItems[idx].querySelector('.accordion-content p').textContent = item.content;
const header = accordionItems[idx].querySelector('.accordion-header h3');
if (header) header.textContent = item.title;
const content = accordionItems[idx].querySelector('.accordion-content p');
if (content) content.textContent = item.content;
}
});
@@ -156,58 +176,123 @@ document.addEventListener('DOMContentLoaded', function () {
}
});
// 优势列表样式切换
bannerBottomList.forEach(li => {
if (lang === 'en') {
li.classList.add('en');
} else {
li.classList.remove('en');
}
});
// 优势列表样式切换
bannerBottomList.forEach(li => {
if (lang === 'en') {
li.classList.add('en');
} else {
li.classList.remove('en');
}
});
// 页脚和其他内容
const emailLeftTitle = document.querySelector(".emailLeftTitle");
if (emailLeftTitle) emailLeftTitle.textContent = data.emailLeftTitle;
const emailLeftText = document.querySelector(".emailLeftText");
if (emailLeftText) emailLeftText.textContent = data.emailLeftText;
const footerBoxRightTitle = document.querySelector('.footerBoxRightTitle');
if (footerBoxRightTitle) footerBoxRightTitle.textContent = data.title;
// 背景图
const bannertop = document.querySelector('.bannertop');
if (bannertop) bannertop.style.backgroundImage = `url(${data.bannertopBG})`;
const bannerBottom = document.querySelector('.bannerBottom');
if (bannerBottom) bannerBottom.style.backgroundImage = `url(${data.bannerBottomBG})`;
document.querySelector(".emailLeftTitle").textContent = data.emailLeftTitle;
document.querySelector(".emailLeftText").textContent = data.emailLeftText;
document.querySelector('.footerBoxRightTitle').textContent = data.title;
//背景图
document.querySelector('.bannertop').style.backgroundImage = `url(${data.bannertopBG})`;
document.querySelector('.bannerBottom').style.backgroundImage = `url(${data.bannerBottomBG})`;
// 切换样式
if (lang === 'en') {
document.querySelector('.topBannerLeftTitle p:nth-child(1)').classList.add('en');
document.querySelector('.topBannerLeftTitle p:nth-child(2)').classList.add('en');
document.querySelector('.topBannerLeft').classList.add('en');
// 切换样式
const topBannerLeftTitle = document.querySelector('.topBannerLeftTitle');
const topBannerLeft = document.querySelector('.topBannerLeft');
if (lang === 'en') {
if (topBannerTitle) topBannerTitle.classList.add('en');
if (topBannerDesc) topBannerDesc.classList.add('en');
if (topBannerLeft) topBannerLeft.classList.add('en');
} else {
document.querySelector('.topBannerLeftTitle p:nth-child(1)').classList.remove('en');
document.querySelector('.topBannerLeftTitle p:nth-child(2)').classList.remove('en');
document.querySelector('.topBannerLeft').classList.remove('en');
if (topBannerTitle) topBannerTitle.classList.remove('en');
if (topBannerDesc) topBannerDesc.classList.remove('en');
if (topBannerLeft) topBannerLeft.classList.remove('en');
}
// 更新下拉菜单显示
updateLanguageDisplay(lang);
}
function handleLangToggle() {
currentLang = currentLang === "zh" ? "en" : "zh";
// 修正的handleLangToggle函数，正确接收lang参数
function handleLangToggle(lang) {
currentLang = lang;
localStorage.setItem('siteLang', currentLang);
applyLang(currentLang);
updateLanguageDisplay(currentLang);
}
// 初始化
applyLang(currentLang);
updateLanguageDisplay(currentLang);
// 事件绑定
document.getElementById("lang-toggle").addEventListener("click", handleLangToggle);
document.getElementById("lang-toggle").addEventListener("keydown", e => {
if (e.key === "Enter" || e.key === " ") handleLangToggle();
// 获取语言切换相关的DOM元素
const langBtn = document.getElementById('lang-btn');
const langDropdown = document.getElementById('lang-dropdown');
const langItems = document.querySelectorAll('.lang-item');
// 切换下拉菜单显示/隐藏
if (langBtn) {
langBtn.addEventListener('click', function(e) {
console.log(`点击切换语言`);
e.stopPropagation(); // 阻止事件冒泡
// 直接修改样式，而不是依赖 CSS 类
if (langDropdown.style.display === 'block') {
langDropdown.style.display = 'none';
} else {
langDropdown.style.display = 'block';
// 确保绝对定位和 z-index 正确设置
langDropdown.style.position = 'absolute';
langDropdown.style.top = '100%';
langDropdown.style.right = '0';
langDropdown.style.zIndex = '1000';
}
console.log('修改后显示状态:', langDropdown.style.display);
// 旋转箭头
const arrow = langBtn.querySelector('.arrow');
if (arrow) {
arrow.style.transform = langDropdown.style.display === 'block' ? 'rotate(180deg)' : 'rotate(0)';
}
});
}
// 点击其他区域关闭下拉菜单
document.addEventListener('click', function(event) {
if (!event.target.closest('.lang-dropdown') && langDropdown) {
langDropdown.style.display = 'none';
const arrow = langBtn?.querySelector('.arrow');
if (arrow) {
arrow.style.transform = 'rotate(0)';
}
}
});
// 语言选择事件
langItems?.forEach(item => {
item.addEventListener('click', function() {
const lang = this.getAttribute('data-lang');
if (lang !== currentLang) {
handleLangToggle(lang); // 现在调用正确的函数
}
langDropdown.classList.remove('show');
const arrow = langBtn.querySelector('.arrow');
if (arrow) {
arrow.style.transform = 'rotate(0)';
}
});
});
// 注释掉旧的事件绑定代码
// document.getElementById("lang-toggle").addEventListener("click", handleLangToggle);
// document.getElementById("lang-toggle").addEventListener("keydown", e => {
// if (e.key === "Enter" || e.key === " ") handleLangToggle();
// });
});