实现一个简单的tab，具体过程见demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.lbtab {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: #fff;
height: 2.4rem;
position: relative;
}
.lbtab .tabitem {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
color: #8C8C8C;
font-size: 0.56rem;
font-weight: bold;
text-align: center;
position: relative;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.lbtab .tabitem.active {
font-size: 0.64rem;
color: #1F1F1F;
}
.lbtab .tabline {
position: absolute;
height: 0.08rem;
background: red;
}
.lbtab .tabline.backward {
-webkit-transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s, left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s, left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
}
.lbtab .tabline.forward {
-webkit-transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1), left 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s;
transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1), left 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s;
}
.lbtab .innerLine {
display: block;
background-color: #FF9900;
margin: auto;
height: 100%;
}
</style>
<script type="text/javascript">
(function () {
function o() { document.documentElement.style.fontSize = (document.documentElement.clientWidth > 750 ? 750 : document.documentElement.clientWidth) / 15 + "px" }
var e = null;
window.addEventListener("resize", function () { clearTimeout(e), e = setTimeout(o, 300) }, !1), o()
})(window);
</script>
</head>
<body>
<div class="lbtab">
<div class="tabitem active">
全部
</div>
<div class="tabitem">
已出票
</div>
<div class="tabitem">
已出票
</div>
<div class="tabline">
<span class="innerLine"></span>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
;(function (w,$) {
var DEFAULT_OPTIONS = {
container:'',
lineHeight: 2, // 下划线高度
activeColor: '#FF9900',
// barPosition: 'bottom',
barDistance: 0,
lastIndex: 0, // 上一次的位置
currentIndex: 0, // 当前的=位置
customBarWidth: '',
tabChange: function (index, oldIndex) {}
}
function MyTab (options) {
this.options = $.extend({}, DEFAULT_OPTIONS,options)
if (!this.options.container) {
throw new Error('parent box is required')
}
var $container = $(this.options.container)
this.$tabitems = $container.children('.tabitem')
this.$tabline = $container.find('.tabline')
this.$innerLine = $container.find('.innerLine')
this.init()
}
MyTab.prototype.init = function () {
this.updateIndex()
this.initEvents()
}
MyTab.prototype.barLeft = function () {
var count = this.$tabitems.length
var left = this.options.currentIndex * (100 / count)
return left + 10 +'%'
}
MyTab.prototype.barRight = function () {
var count = this.$tabitems.length
var right = (count - this.options.currentIndex - 1) * (100 / count)
return right + 10 +'%'
}
MyTab.prototype.barStyle = function () {
var commonStyle = {
left: this.barLeft(),
right: this.barRight(),
display: 'block',
height: this.options.lineHeight,
bottom: this.options.barDistance
}
if (this.options.customBarWidth) {
commonStyle.background = 'transparent'
this.$innerLine.show()
} else {
this.$innerLine.hide()
}
return commonStyle
}
MyTab.prototype.updateIndex = function () {
for(var i = 0; i < this.$tabitems.length; i++) {
if($(this.$tabitems[i]).hasClass('active')) {
this.options.lastIndex = this.options.currentIndex
this.options.currentIndex = i
var direction = this.options.currentIndex > this.options.lastIndex ? 'forward' : 'backward'
var removeCls = direction == 'forward' ? 'backward' : 'forward'
this.$tabline.css(this.barStyle()).removeClass(removeCls).addClass(direction)
this.options.tabChange(this.options.currentIndex, this.options.lastIndex)
// $('.innerLine').css(this.innerBarStyle())
}
}
}
MyTab.prototype.initEvents = function () {
var that = this
this.$tabitems.click(function () {
$(this).addClass('active').siblings().removeClass('active')
that.updateIndex()
})
}
MyTab.prototype.innerBarStyle = function () {
return {
width: this.options.customBarWidth(this.options.currentIndex),
background: this.options.activeColor
}
}
w.MyTab = MyTab
})(window,jQuery)
</script>
<script>
new MyTab({
container: '.lbtab',
barDistance: 24 / 50+'rem',
tabChange: function (index) {
console.log(index)
}
})
</script>
</body>
</html>
