- html布局和css样式在最下
基本效果如图:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/fd61ce325e3506ce6a290029efcec14f.gif)
1、面向过程
1. 找到所有的按钮
2. 给按钮添加事件
3. 根据按钮的下标显示对应的内容
<script>
var btns = document.querySelector(".btns").children;
var boxs = document.querySelectorAll(".box")
for(var i = 0 ; i < btns.length ; i ++){
btns[i].onclick = function(){
removeClass( btns , "active");
this.className += " active";
for(var k = 0 ; k < btns.length ; k ++){
if(btns[k] === this){
break;
}
}
removeClass( boxs , "active");
boxs[k].className += " active";
}
}
function removeClass( ele_list , class_Name){
for(var i = 0 ; i < ele_list.length ;i ++){
var class_arr = ele_list[i].className.split(" ");
var index = class_arr.indexOf(class_Name);
if(index !== -1){
class_arr.splice( index , 1);
ele_list[i].className = class_arr.join(" ");
}
}
}
</script>
2、面向对象
1、OOA 面向对象分析
1)选择元素
2)事件添加器 把功能变成工具
3)下标获取器
4)类名清除器
5)类名添加器
2、OOD 面向对象设计
// 构造函数
function Table(){
}
// 初始化功能
Table.prototype.init = function(){
// 选择元素调用
// 调用bindEvent功能
}
// 元素选择功能
Table.prototype.$ = function(){
}
// 事件添加功能
Table.prototype.bindEvent = function(){
// 获取下标
// 使用类名清除器
// 使用类名添加器
}
// 下标获取器
Table.prototype.getIndex = function(){
}
// 类名清除器
Table.prototype.clearClass = function(){
}
// 类名添加器
Table.prototype.addClass = function(){
}
<script>
function Table(){}
Table.prototype.init = function( options ){
this.btns = this.$(options.btn);
this.contents = this.$(options.content);
this.bindEvent();
}
Table.prototype.$ = function( selector ){
return document.querySelectorAll(selector);
}
Table.prototype.bindEvent = function(){
for(var i = 0 ; i < this.btns.length ; i ++){
this.btns[i].addEventListener("click" , function( index ){
this.clearClass();
this.addClass( index );
}.bind(this , i))
}
}
Table.prototype.clearClass = function(){
for(var k = 0; k < this.btns.length; k ++){
this.btns[k].className = this.btns[k].className.replace(/\s?active/g,"");
this.contents[k].className = this.contents[k].className.replace(/\s?active/g,"");
}
}
Table.prototype.addClass = function( index ){
this.btns[index].className += " active"
this.contents[index].className += " active"
}
var table = new Table();
table.init({
btn:".btn",
content : ".box"
});
</script>
HTML布局
<div class="container">
<div class="btns">
<button data-index="0" class="btn active">1</button>
<button data-index="1" class="btn">2</button>
<button data-index="2" class="btn">3</button>
</div>
<div class="content">
<div class="box active">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</div>
CSS样式
<style>
.container{
width: 360px;
height: 277px;
border: 10px solid #000;
overflow: hidden;
margin: 0 auto;
}
.content{
height: 257px;
text-align: center;
line-height: 257px;
font-size: 100px;
position: relative;
}
.box{
width: 100%;
height: 100%;
position: absolute;
background: #fff;
display: none;
}
button.active{
color: aliceblue;
background: black;
}
.box.active{
display: block;
z-index: 1;
}
</style>