Question

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

我想要这样的东西。

通过defualt显示文本显示，并显示名为 formula1 的div，当点击show时，它会隐藏测试 SHOW 并隐藏上一个div formula1 和文字隐藏与另一个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>

任何人请帮助

Answer 1

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

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

Answer 2

为我工作

   <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

单击显示按钮时，显示按钮和文本 显示按钮将替换为隐藏按钮 将替换为隐藏按钮，其文字 隐藏按钮将替换为显示按钮 ，反之亦然

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

2 个答案: