选项卡效果

最新推荐文章于 2024-09-02 11:46:47 发布

weixin_34349320

最新推荐文章于 2024-09-02 11:46:47 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sq45711478/p/5900491.html

本文提供了一个使用HTML和JavaScript实现的简单菜单切换效果示例。通过点击不同类别的按钮，可以显示或隐藏对应的新闻内容区域。此示例展示了基本的网页布局技巧及简单的JavaScript交互。

<style type="text/css">
*{ margin:0px auto; padding:0px}
#menu{ width:240px; height:30px;}
.list{ width:60px; height:30px; float:left; text-align:center; line-height:30px; vertical-align:middle;}
.list:hover{ cursor: pointer}
.nr{ width:240px; height:200px; text-align:center; line-height:200px; vertical-align:middle}
</style>

</head>

<body>

<div style="width:700px; height:500px; margin-top:30px">

<div id="menu">
<div class="list" style="background-color:#0F0" onclick="Show('d1')">娱乐</div>
<div class="list" style="background-color:#369" onclick="Show('d2')">社会</div>
<div class="list" style="background-color:#F60" onclick="Show('d3')">体育</div>
<div class="list" style="background-color:#CC3" onclick="Show('d4')">军事</div>
</div>

<div id="d1" class="nr" style="background-color:#3C0">
娱乐新闻
</div>

<div id="d2" class="nr" style="background-color:#399; display:none">
社会新闻
</div>
<div id="d3" class="nr" style="background-color:#F30; display:none">
体育新闻
</div>
<div id="d4" class="nr" style="background-color:#CF3; display:none">
军事新闻
</div>

</div>

</body>
<script type="text/javascript">

function Show(id)
{
//隐藏所有
var attr = document.getElementsByClassName("nr");
for(var i=0;i<attr.length;i++)
{
attr[i].style.display = "none";
}
//显示当前的
document.getElementById(id).style.display = "block";
}

</script>
</html>

转载于:https://www.cnblogs.com/sq45711478/p/5900491.html

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。