关于html中替换元素的问题，应该比较简单，我刚入门求教了。
<divid="A"><p>你好</p></div><divid="B"><p>再见</p></div><buttonid="switchA">显示A元素</button...
<div id="A">
<p>你好</p>
</div>
<div id="B">
<p>再见</p>
</div>
<button id= "switchA">显示A元素</button>
<button id= "switchB" >显示B元素</button>
我设置了两个元素，并且在css中设置这两个元素在同一个地方；
我希望页面载入的时候会显示A元素，按“显示B元素”按钮后显示B元素，也就是将A替换成B，再按A的时候再换回来。
求码神给个范例，如果能再来些注释就太完美了~~
对了，我想要的不单单是文字的替换，是整个元素，因为元素里面还包含很多按钮，图片等等，所以想一起换了。 展开
<p>你好</p>
</div>
<div id="B">
<p>再见</p>
</div>
<button id= "switchA">显示A元素</button>
<button id= "switchB" >显示B元素</button>
我设置了两个元素，并且在css中设置这两个元素在同一个地方；
我希望页面载入的时候会显示A元素，按“显示B元素”按钮后显示B元素，也就是将A替换成B，再按A的时候再换回来。
求码神给个范例，如果能再来些注释就太完美了~~
对了，我想要的不单单是文字的替换，是整个元素，因为元素里面还包含很多按钮，图片等等，所以想一起换了。 展开
2个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div显示和隐藏</title>
<style>
div{
width:100px;
height:100px;
background-color: red;
}
</style>
</head>
<body>
<button id= "switchA" onclick="A()">显示A元素</button>
<button id= "switchB" onclick="B()">显示B元素</button>
<div id="A" style="display: none;">
<p>你好</p>
</div>
<div id="B" style="display: none;">
<p>再见</p>
</div>
</body>
</html>
<script>
function A(){
if(document.getElementById("B").style.display="block"){
document.getElementById("B").style.display="none";//隐藏B
}
document.getElementById("A").style.display="block";//显示A
}
function B(){
if(document.getElementById("A").style.display="block"){
document.getElementById("A").style.display="none";//隐藏A
}
document.getElementById("B").style.display="block";//显示B
}
</script>
求采纳~~~~~~~~~~谢谢
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
