JavaScript标签页功能异常求助：切换内容失效问题排查

问题根源及修复步骤： #

1. 初始状态两个标签内容同时显示

你的illustration容器内联样式存在引号嵌套错误，导致display: none完全不生效：
原错误代码：

<div id="illustration" class="gallery-container gallery" style="display=" none """>

修复后：

<div id="illustration" class="gallery-container gallery" style="display: none">

2. 点击标签后所有内容消失

你把gallery类同时加在了容器和图片上，JS里document.getElementsByClassName("gallery")会选中所有带这个类的元素——包括容器和每张图片，循环设置display: none后，后续只恢复了容器的显示，但图片还是处于隐藏状态，所以看起来内容全没了。

两种修复方式选其一即可：

• 方式一：移除图片上的gallery类
  把所有图片标签里的class="gallery"删掉，示例：

<img src="images/poufdesign1.png" alt="">

• 方式二：修改JS选择器，只选中容器
  把JS里的gallery = document.getElementsByClassName("gallery");改成：

gallery = document.querySelectorAll('.gallery-container.gallery');

可选优化：初始激活第一个标签

给第一个标签按钮加上active类，让页面加载时就有高亮的激活状态：

<button class="tab active" onclick="openGallery(event, 'character-design')">
    Character Design
</button>

修复后的完整代码示例 #

HTML部分

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Frogcroaks</title>
  <link rel="stylesheet" href="master.css">
</head>

<body>
  <div class="page">
    <nav class="sidebar">
      <img src="images/logo.png" alt="">
      <button class="sidebar-button">
          <a href="home.html">Home</a>
        </button>

      <button class="sidebar-button">
          <a href="commissions.html">Commission</a>
        </button>

      <button class="sidebar-button">
          <a href="about.html">About & Contact</a>
        </button>
    </nav>

    <div class="content">
      <nav class="page-tab">
        <button class="tab active" onclick="openGallery(event, 'character-design')">
            Character Design
          </button>

        <button class="tab" onclick="openGallery(event, 'illustration')">
            Illustration
          </button>

      </nav>

      <div id="character-design" class="gallery-container gallery">
        <img src="images/poufdesign1.png" alt="">
        <img src="images/poufdesign2.png" alt="">
        <img src="images/poufdesign3.png" alt="">
        <img src="images/fairy-ring.png" alt="">
        <img src="images/luminae.png" alt="">
        <img src="images/griffoy.png" alt="">
        <img src="images/pokemon.png" alt="">
      </div>

      <div id="illustration" class="gallery-container gallery" style="display: none">
        <img src="images/eloa-growth2.png" alt="">
        <img src="images/eloa-growth1.png" alt="">
        <img src="images/seviper-zangoose.png" alt="">
      </div>

    </div>

  </div>

  <script>
    function openGallery(evt, galleryName) {
      // Declare all variables
      var i, gallery, tab;

      gallery = document.getElementsByClassName("gallery");
      for (i = 0; i < gallery.length; i++) {
        gallery[i].style.display = "none";
      }

      tab = document.getElementsByClassName("tab");
      for (i = 0; i < tab.length; i++) {
        tab[i].className = tab[i].className.replace(" active", "");
      }

      document.getElementById(galleryName).style.display = "block";
      evt.currentTarget.className += " active";
    }
  </script>

</body>

</html>

CSS部分（无需修改，保留原代码即可）

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: "Roboto" src: url("Roboto-Bold-webfont.woff") format("woff");
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Roboto" src: url("Roboto-Regular-webfont.woff") format("woff");
  font-style: normal;
  font-weight: 400;
}

body {
  width: 100%;
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  line-height: 1.5em;
}

.page {
  display: flex;
  justify-content: space-around;
  margin-top: 50px;
}

.sidebar {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  position: fixed;
  top: 100px;
  left: 50px;
  width: 400px;
  /* border: 1px solid red; */
}

.sidebar-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
}

.sidebar img {
  height: 200px;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 50px 0 0 400px;
  /* border: 1px solid red; */
}

.page-tab {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.tab {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
}

.sidebar-button,
.tab {
  margin: 10px;
  height: 45px;
  background-color: #D99023;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  color: #FFFFFF;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 20px;
}

.sidebar-button:hover,
.tab:hover {
  background-color: #9C5400;
}

.sidebar-button a {
  text-decoration: none;
  color: #FFFFFF;
}

.page-tab button:active {
  background-color: #9C5400;
  color: #FFFFFF;
}

.gallery-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 50px;
}

.gallery-container img {
  height: 350px;
}

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