javascript - 在两个 div 之间切换可见性

标签 javascript css html toggle

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

最佳答案

查看函数签名:

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

看你怎么调用它:

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

它们匹配吗?不,你想要一个带有两个参数的调用

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

另一个问题是你的函数有问题,看Fibbe的解决方案

关于javascript - 在两个 div 之间切换可见性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19165866/

相关文章:

css - 如何使用 CSS 在元素前插入文本?

jQuery .on ('click' ) 使用绝对位置时出现问题

javascript - 分别以编程方式滚动 2 个 div

javascript - JQuery remove() 无法正常工作

javascript - 如何将 XML 数据导入 Google Charts?

javascript - 不会触发已添加到动态创建的 div 的事件

javascript - 如何强制 Nextjs 为特定模块创建 block ?

javascript - JQuery toggleClass() 打开然后关闭(或删除)

javascript - 如何忽略空的 href 和图像

javascript - 使用 azure 发布时无法 GET/Node.js