在跨度选项卡之间切换以显示不同的IFRAME HTML错误

Question

我正在构建一个电子应用程序，我创建了一个带有跨度的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中进行。

任何帮助将不胜感激，谢谢！

Answer 1

您可以使用类似的东西：

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);
}

Answer 2

这是JavaScript代码，它正确读取了单击元素的ID，因此您可以使用元素的ID将来设置Iframe Thing。

let menu_spans = document.querySelectorAll(".menu_spans");
for (var i = 0; i < menu_spans.length; i++) {
    menu_spans[i].addEventListener('click', (event) => {
           if (event.currentTarget.nodeName === "SPAN") {
           console.log(event.currentTarget.id);
            return true;
           }
    });
}

链接到小提琴：小提琴