如何使用JavaScript实现点击导航链接时仅显示对应关联内容

功能实现方案 #

你要的切换效果逻辑非常简单，只要每次点击导航项的时候，先把所有内容块统一隐藏，再单独展示当前导航对应的内容即可，不用给每个导航单独写重复的功能函数。

代码优化建议 #

• 修复基础语法错误：你现有代码开头重复写了两个<html>标签，结尾的</body缺失右尖括号，先把这两个问题修复避免浏览器解析异常
• 移除废弃标签：<font>标签已经被HTML标准废弃，建议替换为<h1>/<h2>这类语义化的标题标签，样式统一在CSS里控制
• 合并重复JS逻辑：6个导航项对应6个几乎一模一样的函数，完全可以用1个通用函数实现所有切换逻辑，大幅减少冗余代码
• 统一内容块标识：给所有需要切换的内容块加同一个类名（比如tab-content），方便JS批量选中控制，不用单独写每个ID的选择逻辑
• 优化导航交互：可以把href="javascript:void(0)"替换为href="#"，JS里阻止默认跳转行为即可，写法更符合通用规范

修改后可直接运行的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Andreas</title>
  <!-- styles -->
  <link rel="stylesheet" href="stil.css"/>
  <style>
    /* 统一隐藏所有内容块，不用写行内样式 */
    .tab-content {
      display: none;
    }
  </style>
</head>
<body>
  <div class="menu">
    <div class="label">menu</div>
    <div class="spacer"></div>
    <!-- Knappar -->
    <div class="item"><a onclick="switchTab('KablingText')" href="#">Kabling</a></div>
    <div class="item"><a onclick="switchTab('Programmering')" href="#">Programmering</a></div>
    <div class="item"><a onclick="switchTab('Konvertering')" href="#">Konvertering</a></div>
    <div class="item"><a onclick="switchTab('Bildbehandling')" href="#">Bildbehandling</a></div>
    <div class="item"><a onclick="switchTab('ChromeDevtools')" href="#">Chrome Devtools</a></div>
    <div class="item"><a onclick="switchTab('Ellära')" href="#">Ellära</a></div>
    <img src="" alt="">
  </div>

  <!-- Content -->
  <!-- Kabling Text -->
  <br>          
  <div id="KablingText" class="tab-content">
    <h2>Sette opp nettverk</h2>
    <br><br>
    <img class="subjimg" src="images/kabling.jpg">
    <div class="subjtxt">Trekke kabler i veggkanal å sette på ethernetkontakt på kat 6 kabel.
    Hva et patchpanel, svitj og etasjefordeler er. Anext (elektromagnetisk støy), Separasjon mellom starkstrømkabel og tele/datakabel SxP=A.Nek 700 regelbok
    Cenelec Ekomloven. Strukturert kabling Fiber Potens Likstrøm og væxelstrøm Sinuskurva.
    Diagonalrevolvert kabel. Slaglengde.Bølgelengde λ Multiplikatorer – atto – exa I=Strøm, Itensitè courant
    </div>       
  </div>

  <!-- Programmering Text -->
  <div id="Programmering" class="tab-content">
    <h2>Om programmering</h2>
    <br>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa porro ducimus animi! Nisi, temporibus? Iure, doloremque quisquam eveniet, nesciunt, unde culpa recusandae inventore voluptates ipsum esse veritatis eius magni rem?
  </div>
  
  <!-- Konvertering Text -->
  <div id="Konvertering" class="tab-content">
    Binære tall og hvordan man regner med dem. Mega=miljon=1x106
    Giga=miljard=1x109. Hz svingninger pes sek, Høy frekvens har dårligere rekkevidde lav frekvens har bedre rekkevidde.
  </div>

  <!-- Bildbehandling Text -->
  <div id="Bildbehandling" class="tab-content">
    Text om Bildbehandling
  </div>
  
  <!-- Chrome Devtools Text -->
  <div id="ChromeDevtools" class="tab-content">
    Text om Chrome Devtools
  </div>

  <!-- Ellära Text -->
  <div id="Ellära" class="tab-content">
    Text om Ellära
  </div>

  <script>
    // 获取所有内容块
    const allTabContents = document.querySelectorAll('.tab-content')
    // 通用切换函数
    function switchTab(targetId) {
      // 阻止a标签默认跳转行为
      event.preventDefault()
      // 先隐藏所有内容
      allTabContents.forEach(item => item.style.display = 'none')
      // 展示当前选中的内容
      document.getElementById(targetId).style.display = 'block'
    }
  </script>
</body>
</html>

如果需要实现点击当前已激活的导航可以关闭内容的效果，只要把switchTab函数修改为如下即可：

function switchTab(targetId) {
  event.preventDefault()
  const currentTarget = document.getElementById(targetId)
  // 如果当前内容已经显示，就隐藏所有内容
  if(currentTarget.style.display === 'block') {
    allTabContents.forEach(item => item.style.display = 'none')
    return
  }
  allTabContents.forEach(item => item.style.display = 'none')
  currentTarget.style.display = 'block'
}

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