* html布局和css样式在最下
基本效果如图：
1、面向过程
1 <script>
2 // 1. 找到所有的按钮
3 // 2. 给按钮添加事件
4 // 3. 根据按钮的下标显示对应的内容
5
6 // 1. 找到所有的按钮
7 var btns = document.querySelector(".btns").children;
8 var boxs = document.querySelectorAll(".box")
9
10 for(var i = 0 ; i < btns.length ; i ++){
11 // 2. 给按钮添加事件 鼠标点击
12 btns[i].onclick = function(){
13 // 删除掉元素的类名active
14 removeClass( btns , "active");
15 // +=是为了不覆盖原有的class名字
16 this.className += " active";
17 /*获取当前元素的下标
18 循环绑定事件的时候，不能在事件处理函数之中使用i获取，
19 因为for循环是在循环结束之后，才会执行事件。此时的i是循环结束的i
20 所以 此处用this来指向当前发生事件的元素
21 */
22 // 如果this和btns里面的某一项相等了，那么就判断下标是对应的下标
23 for(var k = 0 ; k < btns.length ; k ++){
24 // for循环找到所有的按钮
25 // 如果button是this对应的button
26 if(btns[k] === this){
27 break;
28 }
29 }
30 // 3.根据按钮的下标显示对应的内容
31 removeClass( boxs , "active");
32 boxs[k].className += " active";
33 }
34 }
35
36 // 删除元素的active类名
37 function removeClass( ele_list , class_Name){ //元素组，类名
38 // 遍历整个元素组
39 for(var i = 0 ; i < ele_list.length ;i ++){
40 // 首先 找到className字符串，把它的类名拆分成数组
41 var class_arr = ele_list[i].className.split(" ");
42 // 找到对应的类名
43 var index = class_arr.indexOf(class_Name);
44 // 如果存在这个类名，就删除掉这个class名
45 if(index !== -1){
46 class_arr.splice( index , 1);
47 // 类名再赋值 数组变为字符串
48 ele_list[i].className = class_arr.join(" ");
49 }
50 }
51 }
52 </script>
2、面向对象
1 <script>
2 /* 1、OOA：面向对象分析
3 1)选择元素
4 2)事件添加器 把功能变成工具
5 3)下标获取器
6 4)类名清除器
7 5)类名添加器
8 */
9
10 // 2、OOD：面向对象设计
11 // 构造函数
12 // function Table(){
13
14 // }
15 // // 初始化功能
16 // Table.prototype.init = function(){
17 // // 选择元素调用
18 // // 调用bindEvent功能
19 // }
20
21 // // 元素选择功能
22 // Table.prototype.$ = function(){
23
24 // }
25
26 // // 事件添加功能
27 // Table.prototype.bindEvent = function(){
28 // // 获取下标
29 // // 使用类名清除器
30 // // 使用类名添加器
31 // }
32
33 // // 下标获取器
34 // Table.prototype.getIndex = function(){
35
36 // }
37
38 // // 类名清除器
39 // Table.prototype.clearClass = function(){
40
41 // }
42
43 // // 类名添加器
44 // Table.prototype.addClass = function(){
45
46 // }
47 //------------------------------
48 // 3、OOP 面向对象编程
49 function Table(){}
50 // 初始化
51 Table.prototype.init = function( options ){
52 // 选择元素调用
53 this.btns = this.$(options.btn);
54 this.contents = this.$(options.content);
55 // 调用事件添加功能
56 this.bindEvent();
57 }
58 // 元素选择
59 Table.prototype.$ = function( selector ){
60 return document.querySelectorAll(selector);
61 }
62 // 事件添加
63 Table.prototype.bindEvent = function(){
64 for(var i = 0 ; i < this.btns.length ; i ++){
65 this.btns[i].addEventListener("click" , function( index ){
66 // 类名清除
67 this.clearClass();
68 // 类名添加
69 this.addClass( index );
70 }.bind(this , i))//this指向实例对象，同时获取下标
71 }
72 }
73 // // 下标获取器 用bind也能获取
74 // Table.prototype.getIndex = function(){
75
76 // }
77 // 类名清除器
78 Table.prototype.clearClass = function(){
79 for(var k = 0; k < this.btns.length; k ++){
80 this.btns[k].className = this.btns[k].className.replace(/\s?active/g,"");
81 this.contents[k].className = this.contents[k].className.replace(/\s?active/g,"");
82 }
83 }
84 // 类名添加器
85 Table.prototype.addClass = function( index ){
86 this.btns[index].className += " active"
87 this.contents[index].className += " active"
88 }
89
90 var table = new Table();
91 table.init({
92 btn:".btn",
93 content : ".box"
94 });
95 </script>
HTML布局
1 <div class="container"> 2 <div class="btns"> 3 <button data-index="0" class="btn active">1</button> 4 <button data-index="1" class="btn">2</button> 5 <button data-index="2" class="btn">3</button> 6 </div> 7 <div class="content"> 8 <div class="box active">1</div> 9 <div class="box">2</div> 10 <div class="box">3</div> 11 </div> 12 </div>
CSS样式
1 <style>
2 .container{
3 width: 360px;
4 height: 277px;
5 border: 10px solid #000;
6 overflow: hidden;
7 margin: 0 auto;
8 }
9 .content{
10 height: 257px;
11 text-align: center;
12 line-height: 257px;
13 font-size: 100px;
14 position: relative;
15 }
16 .box{
17 width: 100%;
18 height: 100%;
19 position: absolute;
20 background: #fff;
21 display: none;
22 }
23 button.active{
24 color: aliceblue;
25 background: black;
26 }
27 .box.active{
28 display: block;
29 z-index: 1;
30 }
31 </style>
来源：https://www.cnblogs.com/uuind/p/12544134.html