-1

我想在 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';
}              
}
4

6 回答 6

7

您需要使用方括号以使多行受 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';
   }              
}
于 2013-10-03T17:57:01.440 回答
7

查看函数签名：

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

看看你是怎么称呼它的：

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

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

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

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

于 2013-10-03T17:55:15.720 回答
2

您似乎在 javascript 函数中错误地编写了 qithin "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>
于 2014-06-17T06:00:57.553 回答
0

如果你可以使用 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;}
于 2013-10-03T18:02:46.207 回答
0

此代码可能会有所帮助：

<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>
于 2013-10-03T17:58:12.340 回答
0 
<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>
于 2014-11-13T15:28:58.423 回答