Question

我想在div id1和div id2之间切换/切换可见性。我希望在页面加载时默认显示div id2，当我点击链接时我希望div id1替换div id2。我尝试了几种不同的方法，甚至在jsfiddle上玩了一下但是我无法弄清楚我在这里缺少什么。

HTML：

<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>

JavaScript的：

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

Answer 1

查看函数签名：

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

看看你是怎么称呼的：

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

他们匹配吗？不。你想要一个带有两个参数的电话

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

另一个问题是你的功能是错误的，请参阅Fibbe的解决方案

Answer 2

您需要使用括号以使多行受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';
   }              
}

Answer 3

你似乎错误地写了qithin＆＃34;如果＆＃34;和＆＃34;否则＆＃34;在javascript函数中。正确的方法是 -

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>

Answer 4

此代码可能会有所帮助：

<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>

Answer 5

如果你可以使用Jquery：

<强> HTML

<a id="button" >Click</a>
<div class="div show">1</div>
<div class="div">2</div>

<强>的Javascript

$('#button').click(function() {
    $('.div').toggleClass('show');
});

<强>的CSS

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

Answer 6

<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>

切换两个div之间的可见性

6 个答案: