选项卡面向对象写法

最新推荐文章于 2024-05-25 19:20:08 发布

jingtian678

最新推荐文章于 2024-05-25 19:20:08 发布

阅读量409

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web大前端

本文链接：https://blog.youkuaiyun.com/jingtian678/article/details/61615198

web大前端专栏收录该内容

291 篇文章

订阅专栏

本文介绍了一个简单的网页选项卡切换效果实现方法，通过面向对象的JavaScript编程方式完成按钮点击与对应内容显示隐藏的功能。代码中使用了HTML、CSS进行页面布局与样式设置，并通过JavaScript实现了动态交互。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选项卡面向对象写法</title>
<style>
#div1 .active{background: yellow;}
#div1 div{height: 200px; width: 200px; background: #ccc; display: none;}
</style>
<script>
//混合模式
window.onload=function()
{
new TabSwitch('div1');
};
function TabSwitch(id)//构造函数
{
var _this=this;
var oDiv1=document.getElementById(id);
this.aIut=oDiv1.getElementsByTagName('input');
this.aDiv=oDiv1.getElementsByTagName('div');
for(var i=0;i<this.aIut.length;i++)
{
this.aIut[i].index=i; //index属性可返回下拉列表中选项的索引位置
this.aIut[i].onclick=function()
{
_this.fnClick(this);
};
}
};

TabSwitch.prototype.fnClick=function(oBtn)//原型
{
for(var i=0;i<this.aIut.length;i++)
{
this.aIut[i].className='';
this.aDiv[i].style.display='none';
}
oBtn.className='active';
this.aDiv[oBtn.index].style.display='block';
};
</script>
</head>
<body>
<div id="div1">
<input type="button" value="1" class="active"/>
<input type="button" value="2" />
<input type="button" value="3" />
<div style="display: block">周杰伦</div>
<div>张学友</div>
<div>薛之谦</div>
</div>
</body>
</html>