我的网页遇到了一些问题。我连续30分钟研究了这个话题,但仍未找到直接答案。
如果我点击button1:
image1 visible
image2 invisible
image3 invisible
如果我点击button2:
image1 invisible
image2 visible
image3 invisible
如果我点击button3:
image1 invisible
image2 invisible
image3 visible
这是我的Javascript:
function rock(){
document.getElementById('image1').style.display = 'block';
}
document.getElementById('image2').style.display = 'none';
}
document.getElementById('image3').style.display = 'none';
}
function paper(){
document.getElementById('image1').style.display = 'none';
}
document.getElementById('image2').style.display = 'block';
}
document.getElementById('image3').style.display = 'none';
}
function scissors(){
document.getElementById('image1').style.display = 'none';
}
document.getElementById('image2').style.display = 'none';
}
document.getElementById('image3').style.display = 'block';
}
这是我的HTML:
<button id="rock" onclick="rock()">Rock</button>
<button id="paper" onclick="paper()">Paper</button>
<button id="scissors" onclick="scissors()">Scissors</button>
答案 0 :(得分:1)
隐藏此类图片
document.getElementById(“id-of-the-image”)。style.display =“none”;
显示此类图片
document.getElementById(“id-of-the-image”)。style.display =“inline-block”;
您的代码(有更正)
function rock(){
document.getElementById('image1').style.display = 'block';
document.getElementById('image2').style.display = 'none';
document.getElementById('image3').style.display = 'none';
}
function paper(){
document.getElementById('image1').style.display = 'none';
document.getElementById('image2').style.display = 'block';
document.getElementById('image3').style.display = 'none';
}
function scissors(){
document.getElementById('image1').style.display = 'none';
document.getElementById('image2').style.display = 'none';
document.getElementById('image3').style.display = 'block';
}
代码的优化版本
function showImage(imageId) {
document.getElementById(imageId).style.display = 'block';
}
function hideImage() {
document.getElementById(imageId).style.display = 'none';
}
function rock(){
showImage('image1');
hideImage('image2');
hideImage('image3');
}
function paper(){
hideImage('image1');
showImage('image2');
hideImage('image3');
}
function scissors(){
hideImage('image1');
hideImage('image2');
showImage('image3');
}
答案 1 :(得分:1)
只需使用它来隐藏它:
document.getElementById("thingid").style.visibility="hidden";
用它来表明:
document.getElementById("thingid").style.visibility="visible";
本页非常好的教程: http://www.w3schools.com/jsref/prop_style_visibility.asp
第二个建议:您可以使用jquery创建漂亮的过渡效果