在显示/隐藏条件下显示不同的 div答案

【问题标题】：show different divs on both show/hide condition在显示/隐藏条件下显示不同的 div
【发布时间】：2012-12-16 03:20:31
【问题描述】：

我在 SO 中进行了很多搜索。单击时显示/隐藏文本，仅用于显示 div，当单击隐藏时，它不会显示另一个 div。

我想要这样的东西。

默认SHOW显示一个文本，显示名为formula1的div，点击显示时隐藏测试SHOW并隐藏前一个 div formula1 和文本 HIDE 与另一个 div Formula2

一起出现

下面只显示了一个 div，但我希望在单击时显示两个 div。

<script language="javascript"> 
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
        ele.style.display = "none";
    text.innerHTML = "show";
}
else {
    ele.style.display = "block";
    text.innerHTML = "hide";
}
} 
</script>
</head>
<body>
<a id="displayText" href="javascript:toggle();">show</a> <== click Here
<div id="toggleText" style="display: none">peek-a-boo</></div>
</body>

请大家帮忙

【问题讨论】：

两个 DIV 的??示例标记中只有一个。还有formula1和formula2是什么？
@charlietfl
一些文字

一些文字
解释需要更完整以及足够的 html 来完整地表示问题

标签： javascript show-hide

【解决方案1】：

为我工作

   <html>
<head>
<script language=javascript type='text/javascript'> 
function hideDiv() { 
if (document.getElementById) { 
document.getElementById('back').style.display = 'none'; 
document.getElementById('sale').style.display = 'block'; 
} 
} 
function showDiv() { 
if (document.getElementById) { 
document.getElementById('back').style.display = 'block'; 
document.getElementById('sale').style.display = 'none'; 
} 
} 
</script> 
</head>
<body onLoad="javascript:showDiv()">
<div id="sale"> <button onClick="javascript:showDiv()">Hide</button><br>Hide Button will be replaced with Show button</div>
<div id="back"><button onClick="javascript:hideDiv()">Show<br> </button><br>Show Button will be replaced with hide button</div>
</body>
</html>

在这个脚本上.. 两个 div 都被隐藏和显示.. ex

当显示按钮被点击时，显示按钮和文本显示按钮将被替换为隐藏按钮替换为 Hide 按钮，其文本 Hide Button 将替换为 Show button，反之亦然

【讨论】：

【解决方案2】：

你为什么不使用 JQUERY 它会减少你编写的代码。通过使用简单的 show() 和 hide() 函数......
这是链接.show() jquery selector和.hide() jquery selector

如果您对 javascript 感兴趣，请转到此 URL simple javascript show hide div

【讨论】：