[英]Show Hide Div if element class loaded
I want to show the div if another div class is loaded.如果加载了另一个 div 类,我想显示该 div。 Show nanobar
only if selected
class is loaded, in other case nanobar
will become hidden仅当加载selected
类时才显示nanobar
否则nanobar
将隐藏
css code sample: 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 code sample: HTML代码示例:
<div class="nanobar">
<span>Content</span>
</div>
<div id="category_container" class="content-padding {if $category} selected{/if}"> </div>
any help in this regards will be appreciated.在这方面的任何帮助将不胜感激。
First check if you can find selected class:首先检查是否可以找到选定的类:
var selected = document.getElementsByClassName("selected");
Then check if this variable has more then one element.然后检查这个变量是否有多个元素。
if (selected.length < 1) {
// Hide your nanobar
} else {
// Show it
}
This is not the full solution, if you still have troubles, ask in comments.这不是完整的解决方案,如果您仍有问题,请在评论中提问。
The code checks if the second div
has a selected
class.该代码检查第二个div
是否具有selected
类。 If so, the first div
will be displayed, otherwise the first div
stays hidden.如果是这样,第一个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>
Note: Removed the display property from nanobar
class and made it into it's own class.注意:从nanobar
类中删除了 display 属性并将其放入它自己的类中。 Makes it easier to hide and show an element, as well as being able to reuse it for other elements.使隐藏和显示元素更容易,并且能够将其重用于其他元素。
You can read more about classList
here您可以在此处阅读有关classList
更多信息
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.