導航欄內容在翻譯后失去所有樣式

我遇到了一個問題，我設法翻譯了導航欄。現在，我已經設法翻譯了頁面的所有內容，但我遇到了一個我自己無法解決的問題。問題：當我將頁面的語言從“英語”切換到“拉脫維亞語”時，所有這些都會<a hrefs>導致其他頁面并且 css 樣式消失。翻譯后的拉脫維亞語版本在導航欄中變成純文本，但在標題和段落中保持不變。誰能幫我解決問題？

        const langEl = document.querySelector('.langWrap');
        const link = document.querySelectorAll('a');
        const titleEl = document.querySelector('.headings');
        const descrEl = document.querySelector('.description');
        const aboutUsEl = document.querySelector('.aboutus');
        const newsEl = document.querySelector('.news');
        const resultsEl = document.querySelector('.results');
        const leaguesEl = document.querySelector('.leagues');
        const loginEl = document.querySelector('.login');


        link.forEach(el => {
            el.addEventListener('click', () => {
                langEl.querySelector('.active').classList.remove('active');
                el.classList.add('active');

                const attr = el.getAttribute('language');

                titleEl.textContent = data[attr].headings;
                descrEl.textContent = data[attr].description;
                aboutUsEl.textContent = data[attr].aboutus;
                newsEl.textContent = data[attr].news;
                resultsEl.textContent = data[attr].results;
                leaguesEl.textContent = data[attr].leagues;
                loginEl.textContent = data[attr].login;
            });
        });
var data = {
    "english": 
    {
    "aboutus":"About Us",
    "news":"News",
    "results":"Results",
    "leagues":"Leagues",
     "login":"Profile",
      "headings": "News",
      "description": 
          "Last weekend there were a lot of great games."
    },
    "latvian": 
    {
        "Aboutus":"Par mums",
         "news":"Jaunumi",
        "results":"Rezultāti",
        "leagues":"līgas",
        "login":"profils",
        "headings": "Jaunumi",
         "description": 
            "Pagāju?ajā nedē?ā bija ?oti daudz labu spē?u"
    }
  }

<div class="langWrap">
            <a href='#' language='english' class="active">EN</a>
            <a href='#' language='latvian'>LV</a>
</div>
<div class="content">
    <header id="up">
        <img src="/img/logo.png" alt="QuickSportScoresLogo" class="logo">
        <div class="container">
            <nav>
                <ul>
                    <li class="aboutus"><a href="/">About Us</a></li>
                    <li class="news"><a href="news">News</a></li>
                    <li class="results"><a href="results">Results</a></li>
                    <li class="leagues"><a href="leagues">Leagues</a></li>
                    <li class="login"><a href="login">Profile</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <h1 class="headings"> News</h1>
    <p class="description">Last weekend there were a lot of great games.
    </p>
</div> 

uj5u.com熱心網友回復：

這里只是將選擇器更改為標簽

const langEl = document.querySelector('.langWrap');
        const link = document.querySelectorAll('a');
        const titleEl = document.querySelector('.headings');
        const descrEl = document.querySelector('.description');
        const aboutUsEl = document.querySelector('.aboutus a');
        const newsEl = document.querySelector('.news a');
        const resultsEl = document.querySelector('.results a');
        const leaguesEl = document.querySelector('.leagues a');
        const loginEl = document.querySelector('.login a');


        link.forEach(el => {
            el.addEventListener('click', () => {
                langEl.querySelector('.active').classList.remove('active');
                el.classList.add('active');

                const attr = el.getAttribute('language');

                titleEl.textContent = data[attr].headings;
                descrEl.textContent = data[attr].description;
                aboutUsEl.textContent = data[attr].aboutus;
                newsEl.textContent = data[attr].news;
                resultsEl.textContent = data[attr].results;
                leaguesEl.textContent = data[attr].leagues;
                loginEl.textContent = data[attr].login;
            });
        });
var data = {
    "english": 
    {
    "aboutus":"About Us",
    "news":"News",
    "results":"Results",
    "leagues":"Leagues",
     "login":"Profile",
      "headings": "News",
      "description": 
          "Last weekend there were a lot of great games."
    },
    "latvian": 
    {
        "aboutus":"Par mums",
         "news":"Jaunumi",
        "results":"Rezultāti",
        "leagues":"līgas",
        "login":"profils",
        "headings": "Jaunumi",
         "description": 
            "Pagāju?ajā nedē?ā bija ?oti daudz labu spē?u"
    }
  }

<div class="langWrap">
            <a href='#' language='english' class="active">EN</a>
            <a href='#' language='latvian'>LV</a>
</div>
<div class="content">
    <header id="up">
        <img src="/img/logo.png" alt="QuickSportScoresLogo" class="logo">
        <div class="container">
            <nav>
                <ul>
                    <li class="aboutus"><a href="/">About Us</a></li>
                    <li class="news"><a href="news">News</a></li>
                    <li class="results"><a href="results">Results</a></li>
                    <li class="leagues"><a href="leagues">Leagues</a></li>
                    <li class="login"><a href="login">Profile</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <h1 class="headings"> News</h1>
    <p class="description">Last weekend there were a lot of great games.
    </p>
</div>

標籤：javascript html

上一篇：如何不顯示map()回傳的未定義值

下一篇：JS在自己的檔案中時出現HTTP錯誤405，但在HTML中則沒有