JSON生成导航菜单无法点击的问题求助

你的锚点链接无法点击的核心原因是内容更新逻辑错误地覆盖了链接标签：

• 带有lang-attribute的是<li>元素，而updateContent函数直接给<li>设置textContent，这会彻底替换掉<li>内部的<a>标签，把可点击的链接变成纯文本。
• 页面加载时存在两个重复的DOMContentLoaded监听：先执行updateMenuItems给<a>设置文字，随后执行的updateContent又覆盖了<li>的内容，直接抹掉了<a>标签。
• 手动添加的第一个菜单（HELLO）没有lang-attribute，不会被updateContent修改，因此<a>标签保留，能正常点击。

1. 修正updateContent函数，只更新<a>标签的文本 #

不需要修改HTML结构，直接让updateContent找到<li>内部的<a>标签来设置文字，避免替换整个<li>的内容：

function updateContent(langData) {
    document.querySelectorAll('[lang-attribute]').forEach(liElement => {
        const key = liElement.getAttribute('lang-attribute');
        const linkTag = liElement.querySelector('a');
        if (linkTag && langData[key]) {
            linkTag.textContent = langData[key];
        }
    });
}

2. 合并重复的页面初始化逻辑 #

移除多余的updateMenuItems函数和对应的DOMContentLoaded监听，把所有初始化逻辑合并到一个监听中，避免重复执行和冲突：

// 合并所有页面初始化逻辑
window.addEventListener('DOMContentLoaded', async () => {
    const userPreferredLanguage = localStorage.getItem('language') || 'en';
    const langData = await fetchLanguageData(userPreferredLanguage);
    
    // 更新页面内容（包括菜单文字）
    updateContent(langData);

    // 更新语言下拉按钮显示
    const languageNames = {
        'en': 'English',
        'fr': 'French',
        'ar': 'Arabic'
    };
    document.getElementById('dropbtn').innerHTML = `${languageNames[userPreferredLanguage]} <i class="fa fa-caret-down" id="arrow"></i>`;
    
    // 设置文本方向
    document.body.setAttribute('dir', userPreferredLanguage === 'ar' ? 'rtl' : 'ltr');
});

3. 移除冗余代码 #

删除ChatGPT添加的updateMenuItems函数以及对应的window.addEventListener('DOMContentLoaded', ...)监听，因为现在updateContent已经能正确处理菜单文字的更新。

//          NAVIGATION          //
const hamburgerMenu = document.querySelector(".hamburger-menu");
const nav = document.querySelector(".nav");

hamburgerMenu.addEventListener("click", () => {
    nav.classList.toggle("active");
});

// 事件委托优化（可选，避免页面加载时获取元素的局限性）
nav.addEventListener('click', function(e) {
    if (e.target.tagName === 'A') {
        nav.classList.remove('active');
    }
});

//      LANGUAGE DROPDOWN SELECTION BUTTON       //
const dropdownBtn = document.getElementById("dropbtn");
const dropdownMenu = document.getElementById("dropdown-content");
const toggleArrow = document.getElementById("arrow");

const toggleDropdown = function () {
  dropdownMenu.classList.toggle("show");
  toggleArrow.classList.toggle("arrow");
};

dropdownBtn.addEventListener("click", function (e) {
  e.stopPropagation();
  toggleDropdown();
});

document.documentElement.addEventListener("click", function () {
  if (dropdownMenu.classList.contains("show")) {
    toggleDropdown();
  }
});

//      LANGUAGE SELECT/SAVE/CHANGE FUNCTIONALITY       //
function setLanguagePreference(lang) {
    localStorage.setItem('language', lang);
}

function updateContent(langData) {
    document.querySelectorAll('[lang-attribute]').forEach(liElement => {
        const key = liElement.getAttribute('lang-attribute');
        const linkTag = liElement.querySelector('a');
        if (linkTag && langData[key]) {
            linkTag.textContent = langData[key];
        }
    });
}

async function fetchLanguageData(lang) {
    const response = await fetch(`languages/${lang}.json`);
    return response.json();
}

async function changeLanguage(lang) {
    setLanguagePreference(lang);
    const langData = await fetchLanguageData(lang);
    updateContent(langData);

    const languageNames = {
        'en': 'English',
        'fr': 'French',
        'ar': 'Arabic'
    };
    document.getElementById('dropbtn').innerHTML = `${languageNames[lang]} <i class="fa fa-caret-down" id="arrow"></i>`;
    
    document.body.setAttribute('dir', lang === 'ar' ? 'rtl' : 'ltr');
}

// 合并后的初始化逻辑
window.addEventListener('DOMContentLoaded', async () => {
    const userPreferredLanguage = localStorage.getItem('language') || 'en';
    const langData = await fetchLanguageData(userPreferredLanguage);
    
    updateContent(langData);

    const languageNames = {
        'en': 'English',
        'fr': 'French',
        'ar': 'Arabic'
    };
    document.getElementById('dropbtn').innerHTML = `${languageNames[userPreferredLanguage]} <i class="fa fa-caret-down" id="arrow"></i>`;
    
    document.body.setAttribute('dir', userPreferredLanguage === 'ar' ? 'rtl' : 'ltr');
});

内容的提问来源于stack exchange，提问作者lisa