html编程里的界面设置按钮类型，如下图的描述，该如何编写。点击上排的按钮，在下面显示内容，不换网页。

 我来答

1个回答

#热议# 在购买新能源车时，要注意哪些？

温馨赤子情9162
2011-12-27 · TA获得超过132个赞

知道答主

回答量：115

采纳率：0%

帮助的人：85.6万

我也去答题访问个人页

关注

展开全部

切换内容,一般有两种实现方法,iframe或者是div
firame是加载不同的网页,改变url便可
div就复杂了,一组div,通过javascript将要显示的div的style属性中display设为block,而隐蔽的div的display=none;
按钮就更简单了,a,input,span,div,ul怎样都可以啦,我喜欢用a,这样的话样式比较好控制,
我现场简单写一个吧
<html>
<head>
<style>
body { font: 12px verdana; }
a.mune { float: left; width: 50px; line-height: 20px; text-align: center; background: #0099cc; color: #00ccff; }
a.munechecked { float: left; width: 80px; line-height: 20px; text-align: center; background: #00ccff; color: #0099cc; }
div.panelhide { display: none; }
div.panelblock { display: block; width: 400px; height: 300px; background-color: #99ccff; border: #00ccff 1px solid; padding: 5px;

color: #003399 }
</style>
<script>
function changePanel(index)
{
for(var i=1; i<=5; i++)
{
if(i == index)
{
document.getElementById("mune" + i).className = "munechecked";
document.getElementById("panel" + i).className = "panelblock";
}
else
{
document.getElementById("mune" + i).className = "mune";
document.getElementById("panel" + i).className = "panelhide";
}
}
}
</script>
</head>
<body>
<a class="munechecked" id="mune1" href="javascript: changePanel(1)">1</a>
<a class="mune" id="mune2" href="javascript: changePanel(2)">2</a>
<a class="mune" id="mune3" href="javascript: changePanel(3)">3</a>
<a class="mune" id="mune4" href="javascript: changePanel(4)">4</a>
<a class="mune" id="mune5" href="javascript: changePanel(5)">5</a>
<div style="clear: both; line-height: 0px; height: 0px;"></div>
<div class="panelblock" id="panel1">panel1</div>
<div class="panelhide" id="panel2">panel2</div>
<div class="panelhide" id="panel3">panel3</div>
<div class="panelhide" id="panel4">panel4</div>
<div class="panelhide" id="panel5">panel5</div>
</body>
</html>

本回答由提问者推荐

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

html编程里的界面设置按钮类型，如下图的描述，该如何编写。点击上排的按钮，在下面显示内容，不换网页。

其他类似问题

为你推荐：