<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
body,ul,li {
margin: 0;
padding: 0;
}
.tabBox {
width: 1000px;
margin: 10px auto;
border: 1px solid #CCCCCC;
box-sizing: border-box;
overflow: hidden;
}
ul,li {
list-style: none;
}
.tabTitle {
display: flex;
border-bottom: 1px solid #CCCCCC;
}
.tabTitle li {
float: left;
flex: 1;
text-align: center;
}
.clearfix:after,.clearfix:before {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
ul li:nth-child(1) {
background: red;
}
ul li:nth-child(2) {
background: yellow;
}
ul li:nth-child(3) {
background: blue;
}
ul li:nth-child(4) {
background: green;
}
ul li:nth-child(5) {
background: olive;
}
ul:nth-child(2) {
height: 240px;
width:500%;
z-index: -1;
}
ul:nth-child(2) li {
float: left;
width: 20%;
height: 100%;
}
</style>
<body>
<div class="tabBox" id="tabBox">
<ul class="tabTitle clearfix" id="tabTitle">
<li>第1个页面</li>
<li>第2个页面</li>
<li>第3个页面</li>
<li>第4个页面</li>
<li>第5个页面</li>
</ul>
<ul class="tabCon clearfix" id="tabCon">
<li>我是第1个页面的内容</li>
<li>我是第2个页面的内容</li>
<li>我是第3个页面的内容</li>
<li>我是第4个页面的内容</li>
<li>我是第5个页面的内容</li>
</ul>
</div>
<script src="tabSwitch.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
//网页运行时加载
window.onload = function() {
var tabBox = document.getElementById("tabBox");
fTabBox(tabBox);
}
//tab切换盒子的动效
function fTabBox(tabBox) {
//获取到tab标题的元素节点
var tabTitle = tabBox.getElementsByClassName("tabTitle")[0];
//获取的tab内容的元素节点
var tabCon = tabBox.getElementsByClassName("tabCon")[0];
fSwitchTo(tabTitle, tabCon);
}
//tab切换的动效
function fSwitchTo(tabTitle, tabCon) {
//获取到标题的所有li元素节点个数
var tabTitleLisNum = tabTitle.childElementCount;
//获取到tab标题元素节点里面所有li
var tabTitleLis = tabTitle.children;
//给每个tab标题的每个li添加点击事件
for(var i = 0; i < tabTitleLisNum; i++) {
tabTitleLis[i].onclick = function() {
var index = -1;
index = fGetSameIndex(tabTitle, this);
fSetTabCon(tabCon, index);
}
}
}
//获取tab内容模块下标和点击的tab标题li下标一致 内容模块
function fSetTabCon(tabCon, t) {
//获取tab内容里面的所有li元素节点个数
var tabConLisNum = tabCon.childElementCount;
//获取tabBox元素节点
var tabBox = document.getElementById("tabBox");
//获取tabBox盒子的宽度
var boxWidth = tabBox.offsetWidth;
//定义起始下标
var startIndex = 0;
//定时器
var timer = null;
//开始位置
var startPosition = -(startIndex* boxWidth);
//结束位置
var endPosition = -(t * boxWidth); //因为tabBox有边框的原因所以移动的时候减去相应的距离
//tabCon.style.marginLeft = leftValue + 'px'
var lead = endPosition - startPosition;
clearInterval(timer);
timer = setInterval(function(){
//等比例滑动
startPosition+= lead/200;
if (startPosition == endPosition) {
//清理定时
clearInterval(timer);
//记录下一次的的开始位置
startIndex = t;
}
tabCon.style.marginLeft = (startPosition + 2* t)+"px";
},10);
}
//获取tab内容模块下标和点击的tab标题li下标一致 下标
function fGetSameIndex(tabTitle, t) {
//获取到标题的所有li元素节点个数
var tabTitleLisNum = tabTitle.childElementCount;
//获取到tab标题元素节点里面所有li
var tabTitleLis = tabTitle.children;
for(var j = 0; j < tabTitleLisNum; j++) {
if(tabTitleLis[j] === t) {
index = j;
}
}
return index;
}
```