JavaScript 面向对象(二) —— 案例篇
看案例前可以先看看基础篇: JavaScript 面向对象(一) —— 基础篇 案例——面向对象的选项卡:把面向过程的程序一步步改成面向对象的形式,使其能够更加的通用(但是通用的东西,一般会比较臃肿)。 下面是一个简单的选项卡,也是我们常见的面向过程的创建形式。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 #tabBox input { 6 background: #F6F3F3; 7 border: 1px solid #FF0000; 8 } 9 #tabBox .active { 10 background: #E9D4D4; 11 } 12 #tabBox div { 13 width:300px; 14 height:250px; 15 display:none; 16 padding: 10px; 17 background: #E9D4D4; 18 border: 1px solid #FF0000; 19 } 20 </style> 21 <meta charset="utf-8" /> 22 <title>选项卡</title> 23 <script> 24 window.onload=function(){ 25 var tabBox = document.getElementById('tabBox');