我正在用 Electron 制作一个应用程序,我实现了一个功能,可以向该应用程序添加标签,并且可以正确添加标签。
问题是,当我直接将它们及其类和属性添加到我的html文件中时,但是当我通过javascript添加它们时,当我尝试直接从javascript中的同一函数直接添加onclick属性时,它们全部折叠了,显示为选项卡,但不执行隐藏和显示选项卡内容的代码,就像手动添加的选项卡一样。
我很确定该函数会添加它需要正确执行的所有内容,但请证明我错了。
这是添加选项卡的函数,它应该调用openTab()onclick,在手动添加时可以工作:
function addTab() {
const button = document.createElement("button");
button.className = "tab-link";
button.innerHTML = "New Tab";
button.onclick = "openTab(event,'test')"
document.getElementsByClassName("tab")[0].appendChild(button);
}
这是我正在使用的功能,如果可能有帮助,它可以隐藏并显示内容:function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tab-content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tab-link");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
最佳答案
传递给onclick
的setter的值应该是一个函数,而不是字符串。您还需要在调用Click监听器时用事件和openTab
调用'test'
,而不是立即调用click监听器。做:
button.onclick = e => openTab(e, 'test');
另外,使用classList
胜过混淆className
字符串:const active = document.querySelector('.tab-link.active');
if (active) {
active.classList.remove('active');
}
evt.currentTarget.classList.add('active');
另外,您可以考虑添加带有tabcontent
CSS规则的类而不是遍历display: block
元素-这样,您可以使用querySelector
选择一个打开的标签页(如果有)并删除该类,就像上面所做的一样。由于您使用的是Electron,因此随时随地使用ES6 +语法-无需使用
var
。
关于javascript - 为什么未将此JavaScript函数添加到我的属性中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65402084/