加载页面时将新 class 添加到现有 class

Question

大家好我尝试在页面准备好且所有元素都加载后向现有 class 'menu' 添加新的 class 'visible'。

这是我使用的代码。

.point {
  position: absolute;
  top: 50%;
  left: 50%;
}

.menu ul {
  background: rgb(255, 255, 255);
  height: 0px;
  opacity: 0;
  position: absolute;
  transition: .5s ease-in-out;
  transition-delay: 0.2s;
}

.menu li:hover ul {
  width: 300px;
  height: 200px;
  top: 30px;
  left: 30px;
  opacity: 1;
}

.menu li {
  list-style-type: none;
}

.menu ul li a {
  list-style-type: none;
  text-decoration: none;
  text-align: left;
  color: rgb(66, 66, 66);
}

.menu ul li h1 {
  font-family: Arial, Helvetica, sans-serif;
  list-style-type: none;
  text-decoration: none;
  text-align: left;
}

.point div {
  position: absolute;
  width: 60px;
  height: 60px;
  background: #999;
  z-index: 1;
  cursor: grab;
}

.point:hover div {
  background: #000;
  position: absolute;
  width: 60px;
  height: 60px;
  z-index: 2;
  cursor: grab;
}

nav.menu {
  visibility: hidden;
}

nav.menu.visible {
  visibility: visible;
}

<body>
  <canvas class="webgl"></canvas>
  <div class="loading-bar"></div>
  <nav class="menu">
    <li>
      <div class="point point-0">
        <div class="point"></div>
        <ul>
          <li>
            <h1 href="#">num</h1>
          </li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
        </ul>
      </div>
    </li>
  </nav>
</body>

https://jsfiddle.net/pect25L3/

我试过了

window.onload = function() {
document.getElementById('menu').className = 'visible';
};

但是没有任何反应。我的错误在哪里？

谢谢。

Answer 1

问题是“.menu”是您 HTML 中的 class 而您在 JS 中使用 'getElementById'。

Answer 2

您正在尝试使用 getById 获取 class='menu'。将 class 更改为 id

window.onload = function() {
document.getElementById('menu').className = 'visible';
};

.point {
  position: absolute;
  top: 50%;
  left: 50%;
}

.menu ul {
  background: rgb(255, 255, 255);
  height: 0px;
  opacity: 0;
  position: absolute;
  transition: .5s ease-in-out;
  transition-delay: 0.2s;
}

.menu li:hover ul {
  width: 300px;
  height: 200px;
  top: 30px;
  left: 30px;
  opacity: 1;
}

.menu li {
  list-style-type: none;
}

.menu ul li a {
  list-style-type: none;
  text-decoration: none;
  text-align: left;
  color: rgb(66, 66, 66);
}

.menu ul li h1 {
  font-family: Arial, Helvetica, sans-serif;
  list-style-type: none;
  text-decoration: none;
  text-align: left;
}

.point div {
  position: absolute;
  width: 60px;
  height: 60px;
  background: #999;
  z-index: 1;
  cursor: grab;
}

.point:hover div {
  background: #000;
  position: absolute;
  width: 60px;
  height: 60px;
  z-index: 2;
  cursor: grab;
}

nav.menu {
  visibility: hidden;
}

nav.menu.visible {
  visibility: visible;
}

<body>
  <canvas class="webgl"></canvas>
  <div class="loading-bar"></div>
  <nav id="menu">
    <li>
      <div class="point point-0">
        <div class="point"></div>
        <ul>
          <li>
            <h1 href="#">num</h1>
          </li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
        </ul>
      </div>
    </li>
  </nav>
  <script>document.getElementById('menu').className = 'visible';</script>
</body>

Answer 3

首先，您尝试将 id 选择器用于 class 选择器，这是一个有效代码

const visibleMenu = () =>{

const menu = document.querySelector('.menu');
menu.classList.add('visible')
};
window.onload = visibleMenu()

加载页面时将新 class 添加到现有 class

Add new class to existing class when the page is loaded

html

javascript

css

class

nav