应该发生的是：当你点击div类cuadro1然后将显示id为A1的div，然后当你点击该div（id A1 ）时，将显示div id B2 。 然后你可以点击那个div id B2然后回到div id A1 。
我认为问题在于你必须在用document.getElementById("B2").style.display="none";显示id B2之前取消显示id document.getElementById("B2").style.display="none"; 但我无法让它发挥作用。
<script> function gato(n){ if(n == 1){ document.getElementById("A" + n).style.display="block"; } if(n == 2){ document.getElementById("B" + n).style.display="block"; } } </script> <body style="width:auto"> <div class="wrapper"> <div class="cuadro1" onClick="gato(1)"> <div style="display:none" id="A1" onClick="gato(2)"> <img src="images/x.png" alt=""/> </div> <div style="display:none" id="B2" onClick="gato(1)"> <img src="images/o.png" alt=""/> </div> </div> </div>What is supposed to happen is: when you click the div class cuadro1 then the div with id A1 is going to be displayed, then when you click that div(id A1) then the div id B2 is going to be displayed. then you can click that div id B2 and go back to div id A1.
I believe the problem lies in that you have to un-display id A before displaying id B2 with document.getElementById("B2").style.display="none"; but I just can't get it to work.
最满意答案
因为你是初学者，我也改变了你的设计：
HTML
<div class="wrapper"> <div class="cuadro1" onClick="gato(1)"> <h1>Click here to show #1</h1> </div> <div> <div style="display:none" id="A1" onClick="gato(2, this)"> <h2>DIV#1</h2> </div> <div style="display:none" id="A2" onClick="gato(1, this)"> <h2>DIV#2</h2> </div> </div> </div>我把#A1和#A2放在class="cuadro1" 。 这是因为点击事件从点击的元素冒泡到他的父母。 因此，当任何人点击A1或A2 ，也会点击cuadro1 。 这意味着A1将被总是显示出来。
为方便起见，我还将B2重命名为A2 。
使用Javascript
functiongato(n, clickedDiv) { // Hide the div that was clicked if(clickedDiv!=null) clickedDiv.style.display = "none"; // Change whatever ID is given document.getElementById("A" + n).style.display="block"; }为了节省时间，我们可以在onclick使用this引用来隐藏被单击的div。 如果您不想隐藏单击的div， clickedDiv!=null允许您不传递任何内容。 由于名称现在是A1和A2 ，因此不再需要if语句。
这是一个测试： https ： //jsfiddle.net/1zojdvt0/
Because you're a beginner, I also made changes to your design:
HTML
<div class="wrapper"> <div class="cuadro1" onClick="gato(1)"> <h1>Click here to show #1</h1> </div> <div> <div style="display:none" id="A1" onClick="gato(2, this)"> <h2>DIV#1</h2> </div> <div style="display:none" id="A2" onClick="gato(1, this)"> <h2>DIV#2</h2> </div> </div> </div>I put #A1 and #A2 from class="cuadro1". This is because click events bubble from the clicked element to his parents. So when anyone clicks A1 or A2 the cuadro1 is also clicked. That means A1 would be allways shown.
I also renamed B2 to A2 for convenience.
Javascript
functiongato(n, clickedDiv) { // Hide the div that was clicked if(clickedDiv!=null) clickedDiv.style.display = "none"; // Change whatever ID is given document.getElementById("A" + n).style.display="block"; }To save ourselves time, we can use this refference in onclick to hide div that was clicked. The clickedDiv!=null allows you to pass nothing if you don't want to hide clicked div. Since names are now A1 and A2, if statement is no longer needed.
Here's a test: https://jsfiddle.net/1zojdvt0/
更多推荐
id,style,display,电脑培训,计算机培训,IT培训"/> <meta name="description&
发布评论