本文实例讲解了最简单的面向对象选项卡实现方法，分享给大家供大家参考，具体内容如下

效果图：

1、功能说明

点击三个按钮分别显示对应的选项卡2、html代码说明

div class=' box ' id=' box ' ul class=' list ' Li class=' in _ active '第一张选项卡/li li class='in '第二张选项卡/li li class='in '第三张选项卡/Li/ul nav class=' ConList ' a class=' con _ active ' href=' JavaScript :'第一个控制按钮/a class=' con ' href=' JavaScript :'第二个控制按钮/a class=' con ' href=' JavaScript :'第三个控制按钮/a /nav /div3、css重点代码说明

/*英寸为选项卡普通状态，默认不显示*/.在，中in _ active { display:无宽度： 600像素；高度： 100像素；背景：橙色；font-size : 50px线高： 100像素；文本对齐：中心；}/*in_active为选项卡选中状态，选中后显示*/.in _ active {显示：块；}/*con为按钮普通状态，默认文字颜色为黑色*/.con .con _ active { color: black背景-颜色：橙色；}/*con_active为按钮选中状态，选中后文字颜色为白色*/.con _ active { color: white}4、js代码说明

函数选项卡{ /*元素获取*///获取选项卡展示部分这个。olist=obj。getelementsbytagname(' ul ')[0]；这个。AIn=这个。奥利斯特。getelementsbytagname(' Li ')；//获取选项卡控制部分这个。oconlist=obj。getelementsbytagname(' nav ')[0]；这个。Acon=这个。oconlist。getelementsbytagname(' a ')；/*变量设置*///选项卡张数这个。计数=这个。AIn。长度；//当前第几张这个。cur=0；var _ this=this for(var I=0；我数这个i ){ //设置索引这一点.索引=我；//给按钮添加事件这一点.onclick=function(){ _ this。cur=这个。指数；_这个。switch()；} } }选项卡。原型。switch=function(){//去掉所有for(var I=0；我数这个。我){这个。AIn[我]。这是一个很好的例子.className=' con} //显示当前这个。AIn[这个。cur].in _ activethis.aCon[this.cur].className=' con _ active}//获取选项卡元素var oBox=document。getelementbyid(' box ')；//构造选项卡对象var tab1=新的tab(ObOx)；希望本文所述对大家学习爪哇岛描述语言面向对象有所帮助。