我有这段代码，它工作正常，但我希望能够做到这一点，当图像出现时，文本层消失，并且会有一个链接来恢复 xt 并删除图像。我该怎么做...，与更改 isibility 和覆盖有关？
<html>
<script type="text/javascript">
//<!--
function sbox(boxName, xname) {
theBox = document.getElementById(boxName);
theBox.className = xname;
}
//-->
</script>
<style>
#main {
position: absolute;
width: 800px;
height: 600px;
}
.test1 {
position: absolute;
top: 20px;
width: 80px;
height: 80px;
border-style: solid;
border-color: green;
}
.test2 {
position: absolute;
top: 120px;
width: 80px;
height: 80px;
border-style: solid;
border-color: red;
}
.test3 {
position: absolute;
top: 220px;
width: 80px;
height: 80px;
border-style: solid;
border-color: blue;
}
.test4 {
position: absolute;
top: 320px;
width: 80px;
height: 80px;
border-style: solid;
border-color: black;
}
.test5 {
position: absolute;
top: 20px;
width: 80px;
height: 80px;
border-style: solid;
border-color: yellow;
}
#test6 {
width: 80px;
height: 80px;
border-style: solid;
border-color: green;
}
#test7 {
width: 80px;
height: 80px;
border-style: solid;
border-color: green;
}
</style>
<div class="test1" id="test1">
<a href="#" onclick="sbox('test1', 'test5'); return false;">test1</a>
</div>
<div class="test2" id="test2">test2</div>
<div class="test3" id="test3">test3</div>
<div class="test4" id="test4">test4</div>
</html>
最佳答案
使用显示属性:
<div id="text1">Some text here</div>
<a href="" onClick="toggleImg('text1');return false;">Show</a></div>
<div id="text1_img" style="display:none"><img src="/your/image_text1.png" /></div>
<div id="text2">Some text here</div>
<a href="" onClick="toggleImg('text2');return false;">Show</a>
<div id="text2_img" style="display:none"><img src="/your/image_text2.png" /></div>
<div id="text3">Some text here</div>
<a href="" onClick="toggleImg('text3');return false;">Show</a>
<div id="text3_img" style="display:none"><img src="/your/image_text3.png" /></div>
然后，一个 JS 函数:
<script type="text/javascript">
function toggleImg(myid)
{
objtxt = document.getElementById(myid);
objimg = document.getElementById(myid+'_img');
if( objtxt.style.display == 'block' ) // Show image, hide text
{
objtxt.style.display = 'none';
objimg.style.display = 'block';
}
else // Hide image, show text
{
objimg.style.display = 'none';
objtxt.style.display = 'block';
}
}
</script>
我希望您能够将其应用到您的需求中。
关于javascript - 删除文本层并替换为图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/323907/