求代码片段支持 引用点击 - 单击当前页面打开, 滚轮点击新标签页打开
相关帖子
-
哦哦,确实是,通过下面的代码片段可解决这个问题。
原理就是监听标签状态被改变,改变后就给它强制改回来。
(()=>{ // 目标节点 const targetNode = document.querySelector('.layout__center'); // 配置观察器 const config = { childList: true, subtree: true, attributes: true, attributeFilter: ['class'] }; // 当观察到变动时执行的回调函数 const callback = function(mutationsList, observer) { for (let mutation of mutationsList) { if (mutation.type === 'childList') { // 当有新的子节点被添加时 mutation.addedNodes.forEach(node => { if (node.nodeType === Node.ELEMENT_NODE && node.matches('li[data-type="tab-header"].item')) { // 监听新添加的节点的 class 属性变化 const classObserver = new MutationObserver((classMutations) => { for (let classMutation of classMutations) { if (classMutation.type === 'attributes' && classMutation.attributeName === 'class') { if (!node.classList.contains('item--unupdate')) { node.classList.add('item--unupdate'); } } } }); classObserver.observe(node, { attributes: true, attributeFilter: ['class'] }); } }); } else if (mutation.type === 'attributes' && mutation.attributeName === 'class') { // 如果是已存在的节点的 class 属性发生了变化 if (mutation.target.matches('li[data-type="tab-header"].item') && !mutation.target.classList.contains('item--unupdate')) { mutation.target.classList.add('item--unupdate'); } } } }; // 创建一个观察器实例并传入回调函数 const observer = new MutationObserver(callback); // 开始观察目标节点 observer.observe(targetNode, config); // 以后可以停止观察 // observer.disconnect(); })();
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于