我之前阅读过一些关于此的主题,但这是我第一次尝试应用它,但我对如何检查某个元素是否有子类并向其中添加一些新类感到很困惑。
假设我想在单击它后将 active
类添加到 li
子元素。这是我想一步一步做的:
- 点击后检查
li
元素中是否有active类 - 如果没有则添加
active
类,如果已经存在则return
或什么都不做
对于 1 我读了这个主题 check-if-an-element-contains-a-class-in-javascript但我很困惑如何检查 child
对于 number 2 我已经为它创建了函数但是我很困惑我必须把它放在我的代码中的什么地方
这是我的 html:
<li id="test" class="additional-menu"><a href="#">Link1</a>
<ul>
<li class="active"><a href="#" id="">Home</a></li>
<li><a href="#">Career</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</li>
这是我的CSS:
.active{
color: red
}
这是我检查 child 的js:
// This is for check a normal class but I doesn't know how to check a child class element from this
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
var el = document.getElementById('test');
alert(hasClass(el, 'active'));
// I can use this function if it inside button using onClick
// But I got quite confused of how to use it without button
function addClass () {
var x = document.getElementsById("test")[0];
x.className += ' active';
}
有人可以帮我理解这个吗?出于你的想象,我想使用它制作一个导航栏,当我移动到不同的路由时,类仍然存在 假设我在 home
我希望类留在 home
如果我在 career
我希望类(class)留在那儿。我觉得我已经在那里解决了它,但仍然没有运气
最佳答案
- 首先将点击监听器附加到所有点击的直接父级 元素。
- 然后通过遍历所有子元素来移除“active”类。
- 最后,将事件类添加到您在点击事件本身中收到的目标
document.addEventListener('DOMContentLoaded', ()=>{
// event attached to parent for getting clicks of all child while bubbling
document.querySelector(".parent").addEventListener("click", (event)=>{
event.preventDefault(); //prevent default "a" tag redirect
let target = event.target;
if(target.tagName != "A"){
return; // to make sure only <a> is been clicked
}
target = target.parentElement; //make related li as target now
for(let li of target.parentElement.children){ //all child of parent ul
li.classList.remove("active");
}
target.classList.add("active");
});
});
.active{
color: red
}
<li id="test" class="additional-menu"><a href="#">Link1</a>
<ul class="parent">
<li class="active"><a href="#" id="">Home</a></li>
<li><a href="#">Career</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</li>
关于javascript - 如何检查元素类子项是否具有特定类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58194616/