Javascript 在两个div之间切换可见性

我想在div id1和div id2之间切换/切换可见性。我希望在加载页面时默认显示div id2，当我单击链接时，我希望div id1替换div id2。我尝试了几种不同的方法，甚至在JSFIDLE上使用了一些，但我不知道这里缺少了什么

HTML:

---

查看函数签名：

function toggle_visibility(id1, id2) 
                           ^^^^^^^^ 

看看你怎么称呼它：

onclick="toggle_visibility('id'); toggle_visibility('id2');"
                           ^^^^                     ^^^^^

他们匹配吗？不，你想要一个有两个参数的调用

onclick="toggle_visibility('id1', 'id2');"

---

另一个问题是您的函数错误，请参阅Fibbe的解决方案，您需要使用括号才能使多行代码受if语句的影响：

function toggle_visibility(id1, id2) {  
   var e = document.getElementById(id1);
   var e2 = document.getElementById(id2);
   if(e.style.display == 'block') {                
      e.style.display = 'block';             
      e2.style.display = 'none';
   }
   else {
      e.style.display = 'none';            
      e2.style.display = 'block';
   }              
} 

---

以下代码可能会有所帮助：

<div id="mydivon" style="display:block">This is on.</div>
<div id="mydivoff" style="display:none">This is off.</div>


<a href="javascript:;" onmousedown="toggleDiv('mydiv');">Toggle Div Visibility</a>

<script language="javascript">
  function toggleDiv(divid)
  {

    varon = divid + 'on';
    varoff = divid + 'off';

    if(document.getElementById(varon).style.display == 'block')
    {
    document.getElementById(varon).style.display = 'none';
    document.getElementById(varoff).style.display = 'block';
    }

    else
    {  
    document.getElementById(varoff).style.display = 'none';
    document.getElementById(varon).style.display = 'block'
    }
}
</script>

---

如果您可以使用Jquery：

Html

Css

---

您似乎在javascript函数中错误地编写了if和else语句。正确的方法是-

function toggle_visibility(id1, id2) {  
   var e = document.getElementById(id1);
   var e2 = document.getElementById(id2);
   if(e.style.display == 'block') {                
      e.style.display = 'block';             
      e2.style.display = 'none';
   }
   else {
      e.style.display = 'none';            
      e2.style.display = 'block';
   }              
} 

<a href="#id" onclick="toggle_visibility('id1', 'id2');">Change Payment Method</a>
<div id="id1" style="display: none"><p>test 1</p></div>
<div id="id2"><p>test 2</p></div>

另外，您以错误的方式传递了参数，正确的方式是-

function toggle_visibility(id1, id2) {  
   var e = document.getElementById(id1);
   var e2 = document.getElementById(id2);
   if(e.style.display == 'block') {                
      e.style.display = 'block';             
      e2.style.display = 'none';
   }
   else {
      e.style.display = 'none';            
      e2.style.display = 'block';
   }              
} 

<a href="#id" onclick="toggle_visibility('id1', 'id2');">Change Payment Method</a>
<div id="id1" style="display: none"><p>test 1</p></div>
<div id="id2"><p>test 2</p></div>

---

是的，我看到了，轻微的打字错误，但不管怎样，即使我改正了，它也不起作用。那不是一个轻微的打字错误。Fibbe的解决方案显示了你的另一个输入错误。因为变量id1和id2是什么？看看我和你做了什么。您缺少了字符串周围的引号。我非常喜欢这个方法，但我正在尝试在JSFIDLE上使用它，它对我不起作用。我已逐字抄写了这封信。工作实例。我只是觉得你忘了启用jQuery=@Arringar1，你必须使用jQuery。你是吗？我回答的第一行是你是否可以使用Jquery：我忘记启用Jquery了。不幸的是，在这个网站上，我使用的是jQuery 1.4.4，这是我在没有重大重新设计的情况下所能做到的。它在JSFIDLE 1.6.4上确实有效，但在1.4.4上对我不起作用使用以下链接，其工作性能良好--->

.div {display:none;}
.show {display:block;}

function toggle_visibility(id1, id2) {  
   var e = document.getElementById(id1);
   var e2 = document.getElementById(id2);
   if(e.style.display == 'block') {                
      e.style.display = 'block';             
      e2.style.display = 'none';
   }
   else {
      e.style.display = 'none';            
      e2.style.display = 'block';
   }              
} 

<a href="#id" onclick="toggle_visibility('id1', 'id2');">Change Payment Method</a>
<div id="id1" style="display: none"><p>test 1</p></div>
<div id="id2"><p>test 2</p></div>

<a href="#id" onclick="toggle_visibility('id1', 'id2');">Change Payment Method</a>
<div id="id1" style="display: none"><p>test 1</p></div>
<div id="id2"><p>test 2</p></div>