我的html文件中有两个div。我想隐藏第一个div并在html输入按钮onclick
事件上显示另一个div。
这是我的代码,
function switchVisible() {
if (document.getElementById('Div1') !== undefined) {
if (document.getElementById('Div1').style.display == 'Block') {
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'Block';
} else {
document.getElementById('Div1').style.display = 'Block';
document.getElementById('Div2').style.display = 'none';
}
}
}
#Div2 {
display: none;
}
<input id="Button1" type="button" value="" onclick="javascript:switchVisible();" />
但它不起作用。任何帮助将不胜感激。
感谢。
答案 0 :(得分:9)
1)在onclick中,您不必使用“javascript:”,这是隐含的。
2)你检查“display:block”,我总是检查“display:none”(因为显示也可以是“inline-block”等)。
试试这个:
function switchVisible() {
if (document.getElementById('Div1')) {
if (document.getElementById('Div1').style.display == 'none') {
document.getElementById('Div1').style.display = 'block';
document.getElementById('Div2').style.display = 'none';
}
else {
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'block';
}
}
}
#Div2 {
display: none;
}
<div id="Div1">Div 1</div>
<div id="Div2">Div 2</div>
<input id="Button1" type="button" value="Click" onclick="switchVisible();"/>
答案 1 :(得分:3)
因为它用jQuery标记,所以这是简单的jQuery答案
$('body').on("click touchstart", "#Button1", function(e){
$("#Div1, #Div2").toggle();
});
使用on来监听id #Button,我使用了click和touchstart来使它适合移动设备,然后使用toggle()设置显示的状态:与现在的状态相反。因此,如果它是display:none,则变为display:block,如果是display:block则变为display:none
答案 2 :(得分:1)
试试这个:
var div1 = document.getElementById('Div1'),
div2 = document.getElementById('Div2');
function switchVisible() {
if(!div1) return;
if (getComputedStyle(div1).display == 'block') {
div1.style.display = 'none';
div2.style.display = 'block';
} else {
div1.style.display = 'block';
div2.style.display = 'none';
}
}
document.getElementById('Button1').addEventListener('click', switchVisible);
&#13;
#Div2 {
display:none;
}
&#13;
<div id="Div1">Div 1</div>
<div id="Div2">Div 2</div>
<input id="Button1" type="button" value="Click me" />
&#13;
但是,这种方法可能更好:
var wrapper = document.getElementById('wrapper');
function switchVisible() {
wrapper.classList.toggle('switched');
}
document.getElementById('Button1').addEventListener('click', switchVisible);
&#13;
#wrapper > :last-child {
display: none;
}
#wrapper.switched > :last-child {
display: block;
}
#wrapper.switched > :first-child {
display: none;
}
&#13;
<div id="wrapper">
<div>Div 1</div>
<div>Div 2</div>
</div>
<input id="Button1" type="button" value="Click me" />
&#13;
答案 3 :(得分:1)
function switchVisible() {
var div1=document.getElementById('Div1');
var div2=document.getElementById('Div2');
if (div1 !== undefined && div2 !== undefined) {
div1.style.display = div2.style.display === '' ? 'none' : div2.style.display === 'none' ? 'none' : 'block';
div2.style.display = div1.style.display === 'block' ? 'none' : 'block';
}
}
&#13;
#Div1{
display: block;
background: blue;
}
#Div2 {
display: none;
background: red;
}
.divs
{
width: 50px;
height: 50px;
border: 1px solid #000;
}
&#13;
<input id="Button1" type="button" value="Hide" onclick="switchVisible();" />
<div id="Div1" class="divs"> </div>
<div id="Div2" class="divs"> </div>
&#13;
答案 4 :(得分:0)
您的代码中可能存在一些语法错误。这个是有效的:
function switchVisible() {
if (document.getElementById('Div1') !== undefined) {
if (document.getElementById('Div1').style.display == 'block') {
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'block';
} else {
document.getElementById('Div1').style.display = 'block';
document.getElementById('Div2').style.display = 'none';
}
}
}
#Div1 {
display:none;
}
#Div1 {
background: red;
}
#Div2 {
background: green;
}
#Div1, #Div2 {
width: 50px;
height:50px;
}
<div id="Div1"></div>
<div id="Div2"></div>
<input id="Button1" type="button" value="" onclick="javascript:switchVisible();" />
答案 5 :(得分:0)
不要通过html添加点击事件。添加像document.getElementById ("Button1").addEventListener ("click", switchVisible, false);
请在此处查看jsFiddle:http://jsfiddle.net/bevanr01/gmkconLw/