前言
在日常的开发当中,我们遇到点击不同的Tab出现不同的界面,但是我们要怎么去实现Tab呢?下面分享一下Tab有关的代码实例,有兴趣的小伙伴可以复制到编译器当中运行查看效果。
实现Tab选项卡以及实现自动播放功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#wrap {
width: 300px;
margin: 50px auto;
font-size: 0;
}
#wrap div {
width: 300px;
height: 150px;
border: 1px solid black;
display: none;
box-sizing: border-box;
font-size: 18px;
}
#wrap div:nth-of-type(1) {
display: block;
}
#wrap button {
width: 75px;
background-color: #009F95;
border: none;
border-radius: 0;
color: white;
height: 30px;
}
#wrap button.active {
background-color: orangered;
}
</style>
</head>
<body>
<div id="wrap">
<button class="active">btn1</button>
<button>btn2</button>
<button>btn3</button>
<button>btn4</button>
<div>11111</div>
<div>22222</div>
<div>33333</div>
<div>44444</div>
</div>
<script type="text/javascript">
// 需要实现的功能: 1鼠标移动到button身上,显示对应的div
// 实现思路:默认显示的是第一个div 当鼠标移动到第二个btn身上,需要把1隐藏,把2显示
// 关键点:btn和div要一一对应,aBtn[0] aDiv[0] aBtn[1] aDiv[1]
// 移入的btn下标和要显示的div下标一致
var aBtn = document.getElementsByTagName("button")
// 新知识点,限定查找范围,document表示整个html文档
var oWrap = document.getElementById("wrap")
// 表示在oWrap对象下去查找div元素
var aDiv = oWrap.getElementsByTagName("div")
// 定义个定时器id
var timer = null
console.log(aDiv)
// 给btn绑定事件
for(var i = 0; i < aBtn.length; i++) {
// 给每个btn加一个自定义的索引(下标)
aBtn[i].index = i
aBtn[i].onmouseover = function() {
clearInterval(timer)
// 在这里显示对应的div
// 显示的div的下标和鼠标移入的这个btn下标一样
// this.index 表示当前移入的btn的下标
// alert(this.index)
// 把所有的div都隐藏,然后单独显示某一个
changeTab(aBtn,aDiv,this.index)
}
aBtn[i].onmouseout = function() {
// 移入的是0,nowIndex = 0
// 移入的是1,nowIndex = 1
nowIndex = this.index
autoplay()
}
}
autoplay()
// 定义当前显示的选项卡下标(btn和div)
var nowIndex = 0
// 添加自动播放功能
function autoplay() {
timer = setInterval(function() {
nowIndex++
nowIndex %= aDiv.length
changeTab(aBtn,aDiv,nowIndex)
}, 1000)
}
// 改变选项卡功能
function changeTab(obj_btn, obj_div, index) {
for(var j = 0; j < aDiv.length; j++) {
obj_div[j].style.display = "none"
obj_btn[j].style.backgroundColor = "#009F95"
}
obj_btn[index].style.backgroundColor = "orangered"
obj_div[index].style.display = "block"
}
</script>
</body>
</html>