我遇到了一个问题,我成功地翻译了导航栏.现在,我已经成功地翻译了页面的所有内容,但我有一个我自己无法解决的问题.问题是:当我将页面的语言从"英语"切换到"拉脱维亚语"时,所有<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>