您的当前位置：首页学习javascript面向对象实例讲解面向对象选项卡_javascript技巧

学习javascript面向对象实例讲解面向对象选项卡_javascript技巧

来源：微柏美食网

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

效果图：

1、功能说明

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


 
 第一张选项卡
 第二张选项卡
 第三张选项卡
 
 
 第一个控制按钮
 第二个控制按钮
 第三个控制按钮

3、css重点代码说明

/*in为选项卡普通状态，默认不显示*/
.in,.in_active{
 display: none;
 width: 600px;
 height: 100px;
 background: orange;
 font-size: 50px;
 line-height: 100px;
 text-align: center;
}
/*in_active为选项卡选中状态，选中后显示*/
.in_active{
 display: block;
}
/*con为按钮普通状态，默认文字颜色为黑色*/
.con,.con_active{
 color: black;
 background-color: orange;
}
/*con_active为按钮选中状态，选中后文字颜色为白色*/
.con_active{
 color: white; 
}

4、js代码说明

希望本文所述对大家学习javascript面向对象有所帮助。