$('.information-tab .article-list').hover(function () { $(this).addClass('current').siblings('.article-list').removeClass('current'); },
时间: 2024-01-12 11:02:46 浏览: 30
这是一段 JQuery 代码,它给类名为 `information-tab` 的 DOM 元素下的所有类名为 `article-list` 的子元素绑定了鼠标悬停事件。当鼠标悬停在某个 `article-list` 元素上时,它会为该元素添加 `current` 类名,并移除其所有兄弟元素的 `current` 类名。这样做的目的可能是为了实现一个选项卡效果,让用户在不同的文章列表之间切换。
相关问题
帮我把这段代码转换为原生js$(".ability-list .ability-item").hover(function () { $(".ability-list .ability-item").removeClass("active"); $(this).addClass("active"); });
可以这样转换:
var abilityItems = document.querySelectorAll(".ability-list .ability-item");
for (var i = 0; i < abilityItems.length; i++) {
abilityItems[i].addEventListener("mouseenter", function() {
for (var j = 0; j < abilityItems.length; j++) {
abilityItems[j].classList.remove("active");
}
this.classList.add("active");
});
}
换成javascript代码function () { $(this).css({ backgroundColor: "transparent" }).children(".child-list").css({ display: "none" }) }) //5.切换tab $(".item-title").children(".more").find("li").hover(function () { $(this).addClass("active").siblings().removeClass("active"); $(this).parents(".c-item").find(".item-con").removeClass("active").eq($(this).index()).addClass("active") })
document.addEventListener("DOMContentLoaded", function() {
let parentList = document.querySelectorAll(".l-list > li");
for(let i = 0; i < parentList.length; i++) {
parentList[i].addEventListener("mouseenter", function() {
let childList = this.querySelector(".child-list");
childList.style.display = "block";
for(let j = 0; j < parentList.length; j++) {
if(j != i) {
parentList[j].querySelector(".child-list").style.display = "none";
parentList[j].style.backgroundColor = "transparent";
}
}
this.style.backgroundColor = "transparent";
});
parentList[i].addEventListener("mouseleave", function() {
this.querySelector(".child-list").style.display = "none";
this.style.backgroundColor = "";
});
let liList = parentList[i].querySelectorAll("li");
for(let j = 0; j < liList.length; j++) {
liList[j].addEventListener("mouseenter", function() {
this.style.color = "#ff6700";
});
liList[j].addEventListener("mouseleave", function() {
this.style.color = "#333";
});
}
}
let moreList = document.querySelectorAll(".item-title .more li");
for(let i = 0; i < moreList.length; i++) {
moreList[i].addEventListener("mouseenter", function() {
this.classList.add("active");
for(let j = 0; j < moreList.length; j++) {
if(j != i) {
moreList[j].classList.remove("active");
let itemConList = this.closest(".c-item").querySelectorAll(".item-con");
itemConList[j].classList.remove("active");
}
}
let itemConList = this.closest(".c-item").querySelectorAll(".item-con");
itemConList[i].classList.add("active");
});
}
});