两次内用的多选卡切换代码(非常实用)
使用纯JavaScript编写的替代代码,它实现了与提供的jQuery代码相同的功能:
document.addEventListener('DOMContentLoaded', function() {
var currElements = document.querySelectorAll('.chaolist-title .title .typesDate .curr');
currElements.forEach(function(currElement) {
currElement.addEventListener('mouseover', function(e) {
if (!e.target.classList.contains('curr-hover')) {
// 移除所有同级a元素的curr-hover类
var siblings = currElement.parentElement.querySelectorAll('a');
siblings.forEach(function(sibling) {
sibling.classList.remove('curr-hover');
});
// 给当前元素添加curr-hover类
currElement.classList.add('curr-hover');
// 隐藏所有相关的.chao-ul ul元素
var dataId = currElement.getAttribute('data-id');
var chaolistUls = document.querySelectorAll('.chaolist' + dataId + ' .chao-ul ul');
chaolistUls.forEach(function(ul) {
ul.style.display = 'none';
});
// 显示特定的ul元素
var dataType = currElement.getAttribute('data-type');
var targetUl = document.getElementById('UL' + dataId + '-' + dataType);
if (targetUl) {
targetUl.style.display = 'block';
}
}
});
// 可选:添加mouseout事件以移除curr-hover类(如果需要)
currElement.addEventListener('mouseout', function() {
currElement.classList.remove('curr-hover');
// 注意:这里不重新隐藏所有ul,因为可能用户会快速切换到另一个选项卡
// 如果需要重新隐藏,可以在mouseout事件中添加相应的逻辑
});
});
});代码解释:
DOMContentLoaded事件:确保DOM完全加载后再执行代码。
选择元素:使用querySelectorAll选择所有具有特定类的元素。
事件监听:为每个选中的元素添加mouseover事件监听器。
条件判断:检查触发事件的元素是否已包含curr-hover类,以避免重复操作。
类操作:使用classList.remove和classList.add方法移除和添加类。
显示/隐藏元素:通过修改style.display属性来隐藏和显示元素。
可选的mouseout事件:添加了一个mouseout事件监听器来移除curr-hover类。根据需要,你也可以在这个事件中重新隐藏所有ul元素。
请注意,这段纯JavaScript代码没有依赖jQuery库,因此在使用之前需要确保你的项目中没有引入jQuery,或者你不打算在这个特定的功能中使用jQuery。此外,根据你的HTML结构和具体需求,你可能需要对选择器或逻辑进行一些调整。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
仍然有问题? 我们要如何帮助您?




