[英]Show/hide div's with javascript on a button press (and have all div's hidden first)
我是javascript的新手，我无法隐藏div的开头，我可以让div在彼此之间切换任何帮助都会很棒
<script type="text/javascript">
function show(elementId) {
document.getElementById("id1").style.display="none";
document.getElementById("id2").style.display="none";
document.getElementById("id3").style.display="none";
document.getElementById(elementId).style.display="block";
}
</script>
<button type="button" onclick="show('id1');">Button 1</button>
<button type="button" onclick="show('id2');">Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>
<div id="id1">text 1</div>
<div id="id2">text 2</div>
<div id="id3">text 3</div>
您可以通过添加内联样式隐藏所有div：
<script type="text/javascript">
function show(elementId) {
document.getElementById("id1").style.display="none";
document.getElementById("id2").style.display="none";
document.getElementById("id3").style.display="none";
document.getElementById(elementId).style.display="block";
}
</script>
<button type="button" onclick="show('id1');">Button 1</button>
<button type="button" onclick="show('id2');">Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>
<div id="id1" style="display:none">text 1</div>
<div id="id2" style="display:none">text 2</div>
<div id="id3" style="display:none">text 3</div>
看到它在这里工作： http ： //jsbin.com/suhok/2/
<script type="text/javascript">
function show(elementId) {
document.getElementById("id1").style.display="none";
document.getElementById("id2").style.display="none";
document.getElementById("id3").style.display="none";
document.getElementById(elementId).style.display="block";
}
</script>
<style>
div{
display:none;
}
</style>
<button type="button" onclick="show('id1');">Button 1</button>
<button type="button" onclick="show('id2');">Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>
<div id="id1">text 1</div>
<div id="id2">text 2</div>
<div id="id3">text 3</div>
所有div都将在第一次被隐藏，你的代码将以这种方式工作，把按钮和div放在<body>标签下，<script>和<style>放在<head>标签下
我会用CSS和JavaScript来完成这个： http ： //jsfiddle.net/maximgladkov/XaMzB/1/
JavaScript的
window.show = function(elementId) {
var elements = document.getElementsByTagName("div");
for (var i = 0; i < elements.length; i++)
elements[i].className = "hidden";
document.getElementById(elementId).className = "";
}
CSS
.hidden {
display: none;
}
HTML
<button type="button" onclick="show('id1');">Button 1</button>
<button type="button" onclick="show('id2');">Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>
<div id="id1">text 1</div>
<div id="id2" class="hidden">text 2</div>
<div id="id3" class="hidden">text 3</div>
你可以使用纯CSS隐藏div开头：
#id1, #id2 #id3 {
display: none;
}
你的代码很好。 您只需将script块放在其他所有内容之后。
<button type="button" onclick="show('id1');">Button 1</button>
<button type="button" onclick="show('id2');">Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>
<div id="id1">text 1</div>
<div id="id2">text 2</div>
<div id="id3">text 3</div>
<script type="text/javascript">
function show(elementId) {
document.getElementById("id1").style.display = "none";
document.getElementById("id2").style.display = "none";
document.getElementById("id3").style.display = "none";
document.getElementById(elementId).style.display = "block";
}
</script>
<script type="text/javascript">
function hideAll(){
document.getElementById("id1").style.display="none";
document.getElementById("id2").style.display="none";
document.getElementById("id3").style.display="none";
}
function show(elementId) {
hideAll();
document.getElementById(elementId).style.display="block";
}
</script>
<button type="button" onclick="show('id1');">Button 1</button>
<button type="button" onclick="show('id2');">Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>
<div id="id1">text 1</div>
<div id="id2">text 2</div>
<div id="id3">text 3</div>
<script type="text/javascript">
hideAll();
</script>
jsfiddle： http ： //jsfiddle.net/y7YKV/
全局声明show方法。 看小提琴。 我认为这就是你所需要的。
window.show= function(elementId) {
document.getElementById("id1").style.display="none";
document.getElementById("id2").style.display="none";
document.getElementById("id3").style.display="none";
document.getElementById(elementId).style.display="block";
}
在按钮按下时显示/隐藏div，并使用javascript（并在按钮之间切换）
[英]Show/hide div's with javascript on a button press (and switch between the buttons)
如何显示/隐藏一个 <div> 当单选按钮被点击时 <div> 有同一个班级？
[英]How can I show/hide one <div> when a radio button is clicked on, when all the <div>s have the same class?
Javascript 根据其他 div 的内容有条件地显示/隐藏 div
[英]Javascript conditional show/hide div based on other div's content
切换 - Jquery 我想每当点击它显示的第一个按钮然后点击第二个按钮然后而不是第一个按钮的 div 标签隐藏
[英]toggle - Jquery I want to whenever click on first button it show and then click on second button then instead first button's div tag hide
Javascript - 单击时显示DIV内的按钮（并隐藏所有其他按钮）
[英]Javascript - show a button inside of a DIV when clicked (and hide all others)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.