js实现简单的选项卡带滑动

选项卡切换主要依靠css3里面的新特性transform与translate的结合，如果只使用translate，不会有动画效果；

使用定位同样可以实现同样的效果，但是不能实现content里的子元素高度自适应；所以选择用translate；

如果想根据后台来设置同样是可以的，因为这里使用的是display：flex来布局的，可以根据后台传入的数据来均分tabs_bar;

下面直接撸代码了，欢迎大家多多指教：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tabs选项卡</title>
</head>
<style>
#tabs_view {
width: 600px;
overflow: hidden;
}
.tabs_bar_ul{

list-style: none;
display:-webkit-flex;
-webkit-flex-flow: row;
-webkit-flex-wrap: nowrap;
}
.tabs_bar_ul li {
flex:1;
text-align: center;
}
.tab-line-animated,.tab-content-animated {
transition:transform 0.3s cubic-bezier(0.86, 0, 0.07, 1);
}
#tabs_bar_line {
bottom: 0;
height: 4px;
width:50%;
display:block;
background:red;
width: 50%;
}
.tabs_content {
display:-webkit-flex;
-webkit-flex-flow: row;
-webkit-flex-wrap: nowrap;
}
.tabs_content_item {
flex-shrink: 0;
height:auto;
background:white;
width:100%;
}
</style>
<body>
<div id="tabs_view">
<div class="tabs_bar">
<ul class="tabs_bar_ul">
<li class="tabs_li" data-index='0' onclick="functionIndex()">tab_1</li>
<li class="tabs_li" data-index='1' onclick="functionIndex()">tab_2</li>
</ul>
</div>
<div id="tabs_bar_line" class="tab-line-animated"></div>
<div class="tabs_content tab-content-animated">
<div class="tabs_content_item">
tab1
</div>
<div class="tabs_content_item">
tab2
</div>
</div>
</div>
</body>
<script>
var lis = document.getElementsByClassName("tabs_li");
var line = document.getElementById("tabs_bar_line");
var content = document.getElementsByClassName("tabs_content")[0];
var container = document.getElementById("tabs_view");
lis[0].style.color = "red";
function functionIndex(){
for (var i = 0; i < lis.length; i++) {
lis[i].style.color = "black";
}
$this = event.target;
var index = Number($this.getAttribute("data-index"))
$this.style.color = "red";

var lineWidth = Number(window.getComputedStyle(line,null).width.split("px")[0])
line.style.transform = "translateX("+lineWidth*1*index+"px)";

var containerWidth = Number(window.getComputedStyle(container,null).width.split("px")[0])
content.style.transform = "translateX("+-containerWidth*1*index+"px)";
}
</script>
</html>

来源：https://www.cnblogs.com/Monroe/p/6527073.html

标签

选项卡