切换内容,一般有两种实现方法,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; }
amune { float: left; width: 50px; line-height: 20px; text-align: center; background: #0099cc; color: #00ccff; }
amunechecked { float: left; width: 80px; line-height: 20px; text-align: center; background: #00ccff; color: #0099cc; }
divpanelhide { display: none; }
divpanelblock { 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)
{
documentgetElementById("mune" + i)className = "munechecked";
documentgetElementById("panel" + i)className = "panelblock";
}
else
{
documentgetElementById("mune" + i)className = "mune";
documentgetElementById("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>
欢迎分享，转载请注明来源：浪漫分享网
微信扫一扫
支付宝扫一扫
评论列表（0条）