* 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>