时间戳

首页 > 解决方案 > 如果加载了元素类，则显示隐藏 Div

javascript - 如果加载了元素类，则显示隐藏 Div

问题描述

如果加载了另一个 div 类，我想显示 div。nanobar仅在selected加载类时显示，在其他情况下nanobar将隐藏

CSS代码示例：

.nanobar {
  height: 75px;
  width: 100%;
  background: #fef9c7;
  border:1px solid #fce181;
  color:#333;
  padding:10px;
  margin-bottom:10px;
  font-size: 1.2rem;
  display:none;
}

HTML 代码示例：

<div class="nanobar">
<span>Content</span>
</div>
<div id="category_container" class="content-padding {if $category} selected{/if}"> </div>

在这方面的任何帮助将不胜感激。

标签： javascripthtml

解决方案

代码检查第二个div是否有selected类。如果是这样，第一个div将被显示，否则第一个div保持隐藏。

let divElements = document.querySelectorAll('div');

if (divElements[1].classList.contains("selected")) {
  divElements[0].classList.replace("hide", "show");
} else {
  divElements[0].classList.replace("show", "hide");
}
.nanobar {
  height: 75px;
  width: 100%;
  background: #fef9c7;
  border:1px solid #fce181;
  color:#333;
  padding:10px;
  margin-bottom:10px;
  font-size: 1.2rem;
}

.hide {
  display: none;
}
  
.show {
  display: block;
}
<div class="nanobar hide">
  <p>Hello</p>
</div>
<div class="apple jason selected hide">
  <p>Jason</p>
</div>

注意：从类中删除了 display 属性nanobar并将其放入它自己的类中。使隐藏和显示元素变得更容易，并且能够将其重用于其他元素。

你可以在这里阅读更多classList

推荐阅读