我正在构建一个 Electron 应用程序,我创建了一个包含跨度的 div 菜单,其中包含他们自己的 Iframe HTML。我希望能够单击特定跨度并显示其 Iframe。现在,当我在 HTML 文件中有多个 Iframe 时,它们会相互重叠显示。这是我的 HTML:
<div class="menu">
<img src="./images/group-30.png" class="logo"></img>
<span class="menu_spans" id="tasks">
<img src="images/group-47.png" class="tasks-img"></img>
<!--<iframe src="tasks.html"></iframe>-->
</span>
<span class="menu_spans" id="add-tasks">
<img src="images/group-55.png" class="add-tasks-img">
<iframe src="addTasks.html" scrolling="no" allowtransparency="yes" style="width:1020px; height: 574px; position: relative; top:-350%; left: 57px; border:none;"></iframe>
</span>
<span class="menu_spans" id="billing">
<img src="images/group-60.png" class="billing-img">
<!--<iframe src="billing.html" scrolling="no" allowtransparency="yes" style="width: 1020px; height: 574px; position: relative; top:-269px; left: 57px; border: none;"></iframe>-->
</span>
<span class="menu_spans" id="proxies">
<img src="images/group-61.png" class="proxies-img">
<!--<iframe src=""></iframe>-->
</span>
etc...
我已经尝试过类似的方法,但它不起作用:
let menu_spans = document.querySelectorAll(".menu_spans");
for (var i = 0; i < menu_spans.length; i++) {
menu_spans[i].addEventListener('click', () => {
console.log(this.id);
});
}
我之前在 jQuery 中编写过这个代码,但我不确定如何在普通 js 中完成它。
感谢任何帮助,谢谢!
最佳答案
你可以使用这样的东西:
let menu_spans = document.querySelectorAll(".menu_spans");
for (var i = 0; i < menu_spans.length; i++) {
menu_spans[i].addEventListener('click', smth, false);
}
function smth() {
console.log(this.id);
}
关于javascript - 在跨度选项卡之间切换以显示不同的 Iframe HTML 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55152272/