table选项卡在网页中随处可见，这是一个最基本的功能，今天就来学习做个简单的table选项卡。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>tab选项卡</title>
<style>
* { margin: 0;
padding: 0;
list-style: none;
}
button.active{
background: #145;
}
div{
width: 100px;
height: 100px;
background: #ccc;
display: none;
}
div.active{
display: block;
}
</head>
<body>
<button class="active">图片</button>
<button>专栏</button>
<button>热点</button>
<div class="active">2008年美国次贷危机引爆全球金融危机</div>
<div>危机引爆全球金融危机</div>
<div>美国次贷危机引爆全球金融危机</div>
</body>
<script>
// 获取所有按钮
var aBtn=document.getElementsByTagName('button');
// 获取所有div
var aDiv=document.getElementsByTagName('div');
for(var i=0;i<aBtn.length;i++){
//获取元素
aBtn[i].index=i;
//给所有的btn加index属性
aBtn[i].onmouseover=function() {
//循环给所有btn加移入事件
for(var j=0;j<aBtn.length;j++){
aBtn[j].className='';
//循环给所有btn清除class
aDiv[j].className='';
// 清除了所有div的样式
}
this.className='active';
//给当前按钮加样式
aDiv[this.index].className='active';
//给按钮对应的div加样式
}
}
</script>
</html>
至此一个简单的选项卡便完成了
网友评论