用jq實(shí)現(xiàn)一個(gè)tab欄

實(shí)現(xiàn)一個(gè)簡(jiǎn)單的tab锣笨,具體過(guò)程見(jiàn)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, // 當(dāng)前的=位置
        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>


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末钙姊,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子金矛,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,826評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件凄诞,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡忍级,警方通過(guò)查閱死者的電腦和手機(jī)帆谍,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)轴咱,“玉大人汛蝙,你說(shuō)我怎么就攤上這事烈涮。” “怎么了窖剑?”我有些...
    開封第一講書人閱讀 164,234評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵坚洽,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我西土,道長(zhǎng)讶舰,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,562評(píng)論 1 293
  • 正文 為了忘掉前任翠储,我火速辦了婚禮绘雁,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘援所。我一直安慰自己庐舟,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,611評(píng)論 6 392
  • 文/花漫 我一把揭開白布住拭。 她就那樣靜靜地躺著挪略,像睡著了一般。 火紅的嫁衣襯著肌膚如雪滔岳。 梳的紋絲不亂的頭發(fā)上杠娱,一...
    開封第一講書人閱讀 51,482評(píng)論 1 302
  • 那天,我揣著相機(jī)與錄音谱煤,去河邊找鬼摊求。 笑死,一個(gè)胖子當(dāng)著我的面吹牛刘离,可吹牛的內(nèi)容都是我干的室叉。 我是一名探鬼主播,決...
    沈念sama閱讀 40,271評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼硫惕,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼茧痕!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起恼除,我...
    開封第一講書人閱讀 39,166評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤踪旷,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后豁辉,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體令野,經(jīng)...
    沈念sama閱讀 45,608評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,814評(píng)論 3 336
  • 正文 我和宋清朗相戀三年徽级,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了彩掐。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,926評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡灰追,死狀恐怖堵幽,靈堂內(nèi)的尸體忽然破棺而出狗超,到底是詐尸還是另有隱情,我是刑警寧澤朴下,帶...
    沈念sama閱讀 35,644評(píng)論 5 346
  • 正文 年R本政府宣布努咐,位于F島的核電站,受9級(jí)特大地震影響殴胧,放射性物質(zhì)發(fā)生泄漏渗稍。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,249評(píng)論 3 329
  • 文/蒙蒙 一团滥、第九天 我趴在偏房一處隱蔽的房頂上張望竿屹。 院中可真熱鬧,春花似錦灸姊、人聲如沸拱燃。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,866評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)碗誉。三九已至,卻和暖如春父晶,著一層夾襖步出監(jiān)牢的瞬間哮缺,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,991評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工甲喝, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留尝苇,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,063評(píng)論 3 370
  • 正文 我出身青樓埠胖,卻偏偏與公主長(zhǎng)得像糠溜,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子押袍,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,871評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 可能相遇就是個(gè)錯(cuò)誤侮东。當(dāng)m小姐第一次遇到徐先生時(shí)圈盔,還不知道他們會(huì)有這么多故事,也是只是在ktv一次小小的邂逅悄雅。 m小...
    沫瑾裳閱讀 135評(píng)論 1 0
  • 在遙遠(yuǎn)的A國(guó)有個(gè)小男孩叫愛(ài)發(fā)明驱敲,他為什么會(huì)叫愛(ài)發(fā)明呢?是因?yàn)樗麄儑?guó)家很多的東西都是他發(fā)明的宽闲,所以他的名字叫作...
    宗有閱閱讀 261評(píng)論 1 1
  • 平凡,是生活的底色 每個(gè)人都有屬于自己獨(dú)一無(wú)二的生活娩梨。 有的人沿腰,每天無(wú)憂無(wú)慮,花不完的錢狈定,找不完的樂(lè)子颂龙,過(guò)著榮華富...
    d6129f30134b閱讀 1,953評(píng)論 2 5
  • 關(guān)于PS冷知識(shí)的發(fā)現(xiàn)和運(yùn)用基本上都是來(lái)源于平時(shí)的使用,年頭多了也就掌握了不少(咳咳……)纽什,不過(guò)猶豫的原因是至今仍然...
    中華氣死貓o閱讀 238評(píng)論 0 5
  • 今天上午都是數(shù)學(xué)課措嵌,上到第三節(jié)下課的時(shí)候我們不想上數(shù)學(xué)課了就給數(shù)學(xué)老師說(shuō)想上音樂(lè)課,數(shù)學(xué)老師答應(yīng)了芦缰,同學(xué)們都...
    溫柔了歲月_ai閱讀 151評(píng)論 0 0