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

hanJing/js/header.js

@@ -25,31 +25,136 @@ const headerLangData = {
     }
 };
 
-let currentLang = localStorage.getItem('siteLang') || "zh";
-
-const handleHeaderLangToggle = () => {
-    currentLang = currentLang === "zh" ? "en" : "zh";
-    localStorage.setItem('siteLang', currentLang);
-    setHeaderLang(currentLang);
-};
+// 语言显示更新函数
+function updateHeaderLanguageDisplay(lang) {
+    const currentFlag = document.getElementById('current-flag');
+    const currentLangText = document.getElementById('current-lang');
+    
+    if (currentFlag && currentLangText) {
+        // 检查图片路径是否需要调整
+        const isRootPage = window.location.pathname.includes('index.html') || 
+                           window.location.pathname.endsWith('/');
+        const imgPathPrefix = isRootPage ? './imgs/flags/' : '../imgs/flags/';
+        
+        if (lang === 'en') {
+            currentFlag.src = `${imgPathPrefix}en.svg`;
+            currentLangText.textContent = 'English';
+        } else {
+            currentFlag.src = `${imgPathPrefix}zh.svg`;
+            currentLangText.textContent = '简体中文';
+        }
+    }
+}
 
 function setHeaderLang(lang) {
     const data = headerLangData[lang];
-    document.getElementById("nav-home").textContent = data.nav.home;
-    document.getElementById("nav-business").textContent = data.nav.business;
-    document.getElementById("nav-products").textContent = data.nav.products;
-    document.getElementById("nav-support").textContent = data.nav.support;
-    document.getElementById("nav-future").textContent = data.nav.future;
-    document.getElementById("nav-about").textContent = data.nav.about;
-    document.getElementById("lang-toggle").textContent = data.btn;
-    document.getElementById("logo-img").src = data.logo;
+    
+    // 导航文本
+    const navHome = document.getElementById("nav-home");
+    if (navHome) navHome.textContent = data.nav.home;
+    
+    const navBusiness = document.getElementById("nav-business");
+    if (navBusiness) navBusiness.textContent = data.nav.business;
+    
+    const navProducts = document.getElementById("nav-products");
+    if (navProducts) navProducts.textContent = data.nav.products;
+    
+    const navSupport = document.getElementById("nav-support");
+    if (navSupport) navSupport.textContent = data.nav.support;
+    
+    const navFuture = document.getElementById("nav-future");
+    if (navFuture) navFuture.textContent = data.nav.future;
+    
+    const navAbout = document.getElementById("nav-about");
+    if (navAbout) navAbout.textContent = data.nav.about;
+    
+    // logo
+    // const logoImg = document.getElementById("logo-img");
+    // if (logoImg) logoImg.src = data.logo;
+    
+    // 更新语言显示
+    updateHeaderLanguageDisplay(lang);
+}
+
+// 处理语言切换
+function handleHeaderLangToggle(lang) {
+    window.currentLang = lang;
+    localStorage.setItem('siteLang', lang);
+    setHeaderLang(lang);
+    
+    // 如果有页面特定的语言处理函数，也调用它
+    if (typeof applyLang === 'function') {
+        applyLang(lang);
+    }
+    
+    // 如果在aboutUs页面，还需要更新地图信息
+    if (typeof updateMapInfo === 'function') {
+        updateMapInfo(lang);
+    }
 }
 
 document.addEventListener('DOMContentLoaded', () => {
-    document.getElementById("lang-toggle").addEventListener("click", handleHeaderLangToggle);
-    document.getElementById("lang-toggle").addEventListener("keydown", e => {
-        if (e.key === "Enter" || e.key === " ") handleHeaderLangToggle();
-    });
-    // 页面加载时自动切换到上次选择的语言
+    let currentLang = localStorage.getItem('siteLang') || "zh";
+    
+    // 初始化语言
     setHeaderLang(currentLang);
+    
+    // 获取语言切换相关的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) {
+            e.stopPropagation(); // 阻止事件冒泡
+            langDropdown.classList.toggle('show');
+            const arrow = langBtn.querySelector('.arrow');
+            if (arrow) {
+                arrow.style.transform = langDropdown.classList.contains('show') ? 'rotate(180deg)' : 'rotate(0)';
+            }
+        });
+        
+        // 点击其他区域关闭下拉菜单
+        document.addEventListener('click', function(event) {
+            if (!event.target.closest('.lang-dropdown') && langDropdown) {
+                langDropdown.classList.remove('show');
+                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) {
+                    currentLang = lang;
+                    handleHeaderLangToggle(lang);
+                }
+                langDropdown.classList.remove('show');
+                const arrow = langBtn.querySelector('.arrow');
+                if (arrow) {
+                    arrow.style.transform = 'rotate(0)';
+                }
+            });
+        });
+    } else {
+        // 兼容旧版切换按钮
+        const langToggle = document.getElementById("lang-toggle");
+        if (langToggle) {
+            langToggle.addEventListener("click", () => {
+                currentLang = currentLang === "zh" ? "en" : "zh";
+                handleHeaderLangToggle(currentLang);
+            });
+            langToggle.addEventListener("keydown", e => {
+                if (e.key === "Enter" || e.key === " ") {
+                    currentLang = currentLang === "zh" ? "en" : "zh";
+                    handleHeaderLangToggle(currentLang);
+                }
+            });
+        }
+    }
 });