用jq实现一个tab栏

实现一个简单的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>
用jq实现一个tab栏

实现一个简单的tab，具体过程见demo

推荐阅读更多精彩内容
