切换语言后CSS样式及HTML链接失效问题求助

嘿，我看了你的代码，发现两个核心问题导致了切换语言后CSS失效、链接不能正常工作，咱们一步步来修复：

问题1：HTML结构严重不符合规范 #

你的代码里犯了两个基础的HTML结构错误，这会让浏览器解析页面时出现异常：

• <div id="content"> 放在了 <body> 标签外面，所有可见内容都应该包裹在 <body> 内
• <head> 标签被错误地放在了 <body> 标签里面，正确的结构应该是 <head> 在 <body> 之前，同属 <html> 的子元素

这种错误会导致浏览器无法正确加载CSS、解析DOM，直接引发样式和功能异常。

问题2：语言切换的JS逻辑错误 #

你当前的JS代码是直接替换 .lang 元素（也就是 <li>）的文本内容：

$('.lang').each(function(index, item) {
  $(this).text(arrLang[lang][$(this).attr('key')]);
});

但这些 <li> 里面包含着 <a> 标签（链接），用 .text() 会把整个 <li> 里的内容替换成纯文本，直接毁掉了 <a> 标签的结构——链接自然失效，依赖 <a> 标签的CSS样式也会因为DOM结构改变而无法生效。

完整修复方案 #

1. 修正后的HTML结构（含JS） #

<!DOCTYPE html>
<html lang="de">
<head>
  <script src="https://kit.fontawesome.com/9cef10a72a.js" crossorigin="anonymous"></script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hauptmenü</title>
  <link rel="stylesheet" type="text/css" href="CSS_AYNU/AYNU.Style.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript">
    var arrLang = {
      'en': {
        'wateringzones': 'Wateringzones',
        'sensors': 'Sensors',
        'back': 'Back',
        'mainmenue': 'Main menu',
        'help': 'Help'
      },
      'de': {
        'wateringzones': 'Bewässerungszonen',
        'sensors': 'Sensoren',
        'back': 'Zurück',
        'mainmenue':'Hauptmenü',
        'help': 'Hilfe'
      }
    };
    // 修正后的翻译逻辑：找到.lang元素内的a标签（或直接修改文本节点）
    $(function() {
      $('.translate').click(function() {
        var lang = $(this).attr('id');
        $('.lang').each(function() {
          var key = $(this).attr('key');
          // 判断当前元素是否包含a标签，替换a的文本，否则直接替换元素文本
          if ($(this).find('a').length) {
            $(this).find('a').text(arrLang[lang][key]);
          } else {
            $(this).text(arrLang[lang][key]);
          }
        });
      });
    });
  </script>
</head>
<body>
  <div id="content">
    <img src="IMAGES_AYNU/elsner_logo1.svg" width="150" height="150"/>
  </div>
  <br><br><br><br>
  <div class="header_navbar">
    <header>
      <button id="en" class="translate">English</button>
      <button id="de" class="translate">Deutsch</button>
      <br>
      <h1 class="lang" key="mainmenue">Hauptmenü <i class="fas fa-bars"></i></h1>
    </header>
  </div>
  <br>
  <div class="navebar">
    <nav>
      <ul>
        <li class="navbar lang" key="wateringzones"><a href="AYNU_WATERINGZONES.html">Bewässerungszonen</a></li>
        <br>
        <li class="navbar lang" key="sensors"><a href="AYNU_SENSORS.html">Sensoren</a></li>
        <br>
        <li class="navbar lang" key="back"><a href="AYNU.Structure.html">Zurück</a></li>
      </ul>
    </nav>
  </div>
  <br><br>
</body>
</html>

2. 优化后的CSS（统一选择器避免混淆） #

/* 统一使用nav标签选择器，避免类选择器和标签选择器混用导致的样式异常 */
nav{ height: 40px; background-color: #105ea6; }
nav ul{ color: #105ea6; list-style: none; text-align: center; font-size: 25px; }
nav ul li a{ color: #105ea6; display:inline-block; text-decoration: none; text-align: center; border: 2px grey solid; width: 250px; padding: 20px; border-radius: 8px; cursor: pointer; }
nav ul li a:hover{ border: 2px grey solid; padding: 20px; width: 250px; background-color: #105ea6; color: #f4f4f4; border-radius: 8px; }
.header_navbar{ font-size: x-large; text-align: center; padding-left: 40px; }

关键修改说明 #

1. HTML结构修正：把所有可见内容移到<body>内，<head>放回正确位置，确保浏览器正常解析页面资源和DOM结构。
2. JS逻辑优化：增加了判断，当.lang元素内有<a>标签时，只替换<a>的文本内容，保留<a>标签的链接属性和DOM结构，这样链接能正常工作，CSS样式也能正确作用在<a>标签上。
3. CSS小调整：你原来的CSS里同时用了.nav类选择器和nav标签选择器，容易混淆，这里统一为nav标签选择器，避免样式不生效。

这样修改后，切换语言时就只会替换文本内容，不会破坏原有的DOM结构和链接、样式了。

内容的提问来源于stack exchange，提问作者B.elsner