[英]Switching between span tabs to display different Iframe HTML error
I'm building an electron app and I created a div menu with spans in it that contain their own Iframe HTML. 我正在构建一个电子应用程序,并创建了一个带有跨度的div菜单,其中包含自己的Iframe HTML。 I want to be able to click on a specific span and for it to display its Iframe. 我希望能够单击特定的跨度并显示其iframe。 Right now when I have more than one Iframe in the HTML file, it displays them over each other. 现在,当HTML文件中有多个Iframe时,它会相互显示它们。 Here is my HTML: 这是我的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...
I've tried something like this but it doesn't work: 我已经尝试过类似的方法,但是它不起作用:
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);
});
}
I've coded this before in jQuery a while ago but im not sure how to do it in just regular js. 我之前在jQuery中已经对此进行了编码,但是我不确定如何仅在常规js中进行编码。
Any help is appreciated thank you! 任何帮助表示赞赏谢谢!
You could use something like this: 你可以使用这样的东西:
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);
}
Here is JavaScript code which properly reads id of clicked element, so you can use the id of element to set iframe thing in future. 这是JavaScript代码,可以正确读取clicked元素的ID,因此您将来可以使用element的ID来设置iframe。
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;
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.