请给我一段代码,谢谢。如何在相同区域点击不同按钮,出现不同内容。
如图所示,点击“热销宝贝”在下面的区域出现这些图片。如果点击“最新上架”,在同样的区域出现另外的图片,有高手能给段代码吗?或者用什么html标签可以做到?...
如图所示,点击“热销宝贝”在下面的区域出现这些图片。如果点击“最新上架”,在同样的区域出现另外的 图片,有高手能给段代码吗?或者用什么html标签可以做到?
展开
1个回答
展开全部
把下面的代码保存成html文件,双击打开,你就能看到效果。
<html>
<head>
<meta charset="gb2312">
<title>点击不同按钮出现不同内容</title>
<script type="text/javascript">
function show(num)
{
for(var i=1; i<=4; i++)
{
document.getElementById("d"+i).style.display="none";
}
document.getElementById("d"+num).style.display="block";
}
</script>
<style type="text/css">
#btns
{
margin: 12px;
}
#ctn
{
margin: 12px;
width: 400px;
height: 360px;
position: relative;
}
div.holder
{
width: 400px;
height: 360px;
position: absolute;
top: 0;
left: 0;
padding-left: 20px;
padding-top: 30px;
}
#d1
{
background-color: #edc;
}
#d2
{
background-color: #abc;
}
#d3
{
background-color: #a3e;
}
#d4
{
background-color: #5cc;
}
</style>
<head>
<body onload="show(1);">
<div id="btns">
<button id="btn1" onclick="show(1);">热销宝贝</button>
<button id="btn2" onclick="show(2);">最新上架</button>
<button id="btn3" onclick="show(3);">热门搜索</button>
<button id="btn4" onclick="show(4);">人气宝贝</button>
</div>
<div id="ctn">
<div id="d1" class="holder">
热销宝贝
</div>
<div id="d2" class="holder">
最新上架
</div>
<div id="d3" class="holder">
热门搜索
</div>
<div id="d4" class="holder">
人气宝贝
</div>
</div>
</body>
</html>
追问
非常感谢,能告诉我你的QQ吗?我想咨询你几个问题。可以吗?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询