js特效炫丽选项卡01

最新推荐文章于 2024-02-12 08:20:11 发布

何群杰

最新推荐文章于 2024-02-12 08:20:11 发布

阅读量651

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u011107187/article/details/12765005

本文介绍了一个使用纯JS实现的按钮切换显示不同内容的效果。通过为按钮添加点击事件，可以切换显示不同的div内容块，同时改变按钮样式。该示例涉及DOM操作、事件处理及简单的样式控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<title></title>
<style>
#div1 .active{
background:pink;
}
#div1 div{
width:362px;
height:200px;
border:1px solid black;
background:pink;
display:none;
}
</style>
<script>
window.onload=function(){
var div1=document.getElementById("div1");
var oBtn=div1.getElementsByTagName("input");
var oDiv=div1.getElementsByTagName("div");

for(var i=0;i<oBtn.length;i++){
oBtn[i].index=i;
oBtn[i].onclick=function(){
for(var i=0;i<oBtn.length;i++){
oBtn[i].className='';
oDiv[i].style.display='none';
}
this.className='active';
oDiv[this.index].style.display="block";
}
}
}
</script>
</head>
<body>
<div id="div1">
<input type="button" class='active' value="图片" id="btn1"/>
<input type="button" value="体育" id="btn2" />

<input type="button" value="广西大学" id="btn3"/>
<input type="button" value="南宁华侨投资区华侨中学" id="btn3"/>
<div style="display:block"><img src="38.png" width=362 height=195></div>
<div>体育</div>
<div>广西大学主页</div>
<div>南宁华侨投资区华侨中学主页</div>
</div>
</body>

</html>

JS特效待续02.接下请关注JS特效02

效果图：