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

 

  
第一张选项卡
  
第二张选项卡
  
第三张选项卡
 
  

/*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; 
}