滚动、切换、添加、删除导航栏

草木红
已于 2022-01-27 17:15:55 修改
阅读量1.1k
点赞数 1
于 2022-01-27 15:04:51 首次发布
本文链接：https://blog.csdn.net/kouzuhuai2956/article/details/122718015
版权
JavaScript 专栏收录该内容
30 篇文章 2 订阅
订阅专栏
实现导航栏的滚动、切换、添加、删除，并执行动画效果。
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    body {
      font-size: 12px;
    }

    ul,
    li {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .hide {
      display: none;
    }

    .nav-tabs-collapse {
      width: 700px;
      margin: 20px auto;
      padding-top: 10px;
      padding-left: 30px;
      padding-right: 30px;
      border-bottom: 1px solid #E6E6E6;
      position: relative;
      overflow: hidden;
      height: 45px;
      flex: 0 0 auto;
    }

    .nav-tabs-collapse .chevron-left,
    .nav-tabs-collapse .chevron-right {
      width: 30px;
      background-color: rgb(255, 255, 255);
      height: 33px;
      position: absolute;
      text-align: center;
      font-size: 20px;
      color: #ddd;
      bottom: 0;
      z-index: 2;
      line-height: 33px;
      cursor: pointer;
    }

    .nav-tabs-collapse .chevron-left:hover,
    .nav-tabs-collapse .chevron-right:hover {
      color: #aaa;
    }

    .nav-tabs-collapse .chevron-left {
      left: 0;
    }

    .nav-tabs-collapse .chevron-right {
      right: 0;
    }

    .nav-tabs-collapse .nav-tabs {
      height: 33px;
      line-height: 33px;
      overflow: hidden;
      border-bottom: none;
      display: flex;
      position: absolute;
      left: 30px;
      bottom: 0;
      transition: left 1s ease-out;
    }

    .nav-tabs-collapse .nav-tabs>li {
      position: relative;
      margin-right: 38px;
      white-space: nowrap;
      cursor: pointer;
    }

    .nav-tabs-collapse .nav-tabs>li:hover {
      color: blue;
    }

    .nav-tabs-collapse .nav-tabs>li .del-btn {
      position: absolute;
      top: 0;
      right: -5px;
      display: none;
      width: 12px;
      height: 12px;
      line-height: 10px;
      background-color: #ddd;
      border-radius: 50%;
      text-align: center;
      color: #fff;
      cursor: pointer;
    }

    .nav-tabs-collapse .nav-tabs>li .del-btn:hover {
      background-color: #bdaeae;
    }

    .nav-tabs-collapse .nav-tabs>li.active {
      color: blue;
    }


    .nav-tabs-collapse .nav-tabs>li:hover .del-btn,
    .nav-tabs-collapse .nav-tabs>li.active .del-btn {
      display: block;
    }
  </style>
</head>

<body>
  <div class="nav-tabs-collapse">
    <div class="chevron-left">&lt;</div>
    <ul class="nav-tabs">
      <li class="active">
        导航1导航1导航1导航1导航1导航1导航1导航1
        <span class="del-btn">x</span>
      </li>
      <li>
        导航2导航2导航2导航2导航2导航2导航2导航2导航2导航2
        <span class="del-btn">x</span>
      </li>
      <li>
        导航3导航3导航3导航3导航3导航3导航3导航3导航3导航3
        <span class="del-btn">x</span>
      </li>
      <li>
        导航4导航4导航4
        <span class="del-btn">x</span>
      </li>
    </ul>
    <div class="chevron-right">&gt;</div>
  </div>

  <div style="text-align: center;">
    <button class="add-btn">添加导航栏</button>
  </div>


  <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
  <script>
    //移动标签页
    function moveTabs() {
      var $this = $(this);
      var $collapse = $this.parent();
      var $tabs = $this.parent().find('.nav-tabs');
      var currentLeft = Number($tabs.css('left').split('p')[0]);

      if ($this.hasClass('chevron-left')) {
        //默认离左边30px
        $tabs.css('left', currentLeft + 150 > 31 ? 30 : currentLeft + 150);
      } else if ($this.hasClass('chevron-right')) {
        //允许移动的距离
        var moveWidth = $tabs.width() - $collapse.width() - 30;
        $tabs.css('left', currentLeft - 150 < -moveWidth ? -moveWidth : currentLeft - 150);
      }
    }

    //删除标签页
    function delTab() {
      var $li = $(this).closest('li');
      var $navTabs = $li.parent();
      var activeFlag = $li.hasClass('active');
      var activeItemIndex = $li.index() <= 0 ? 1 : $li.index() - 1;

      //还有别的选项卡并且当前选项卡被选中，则选择其他选项卡
      var $activeLi = $navTabs.find('li:eq(' + activeItemIndex + ')')
      if ($activeLi.length && activeFlag) {
        $activeLi.addClass('active')
      }

      //删除一个元素后调整nav-tabs的位置  30 是navTabs离nav-tabs-collapse右边最小的距离
      var liWidth = Number($li.outerWidth()) + ($li.css('marginLeft') ? Number($li.css('marginLeft').split(
        'p')[0]) : 0) + 30;
      var oldLeft = $navTabs.css('left') ? Number($navTabs.css('left').split('p')[0]) : 0;
      $navTabs.css('left', oldLeft + liWidth >= 0 ? 30 : oldLeft + liWidth);
      $li.remove();
      var $collapse = $('.nav-tabs-collapse');
      var collapseWidth = Number($collapse.width());
      var navTabsWidth = $navTabs.width();
      $('.chevron-left').toggleClass('hide', navTabsWidth <= collapseWidth);
      $('.chevron-right').toggleClass('hide', navTabsWidth <= collapseWidth);
    }

    //删除/添加 标签触发
    function tabShown(e) {
      var $this = e.target ? $(e.target) : e;
      var $previousActiveTab = $(e.relatedTarget);
      var $li = $this;
      var parentWidth = Number($li.outerWidth());
      var $collapse = $('.nav-tabs-collapse');
      var collapseOffsetWidth = Number($collapse.offset().left); //滚动栏已经偏移的距离
      var collapseWidth = Number($collapse.width()); //滚动栏的宽度
      var $navTabs = $collapse.find('.nav-tabs');
      var navTabsWidth = $navTabs.width();

      //当前活动的tab 右边界 相对于 nav-tabs-collapse 偏移的距离
      var thisOffsetWidth = parentWidth + Number($this.offset().left) - collapseOffsetWidth;
      //原来已经有的left长度
      var oldLeft = $navTabs.css('left') ? Number($navTabs.css('left').split('p')[0]) : 0;

      if (thisOffsetWidth > collapseWidth) { //添加标签
        $navTabs.css('left', collapseWidth - thisOffsetWidth + oldLeft);
      } else { //切换标签
        var liOffsetLeft = $li.offset().left;
        //当活动标签处于可见范围内就不滚动
        if (liOffsetLeft - collapseOffsetWidth > collapseWidth || liOffsetLeft - collapseOffsetWidth < 30) {
          $navTabs.css('left', oldLeft + parentWidth - thisOffsetWidth + 30 > 0 ? 30 : oldLeft + parentWidth -
            thisOffsetWidth + 30);
        }
      }
      $('.chevron-left').toggleClass('hide', navTabsWidth <= collapseWidth);
      $('.chevron-right').toggleClass('hide', navTabsWidth <= collapseWidth);
    }
    //点击左右移动按钮时触发
    $('.chevron-left, .chevron-right').click(moveTabs);

    //删除导航栏中的选项时触发
    $('.nav-tabs-collapse >.nav-tabs').on('click', '.del-btn', delTab);

    //切换当前选中的选项
    $('.nav-tabs-collapse >.nav-tabs').on('click', 'li', function (e) {
      var $navTabs = $(this).closest('ul');
      $navTabs.find('li').removeClass('active')

      $(this).addClass('active');
      tabShown(e)
    });

    //添加导航栏
    var index = 5;
    $('.add-btn').click(function (e) {
      $('.nav-tabs-collapse >.nav-tabs').find('li').removeClass('active')
      $('.nav-tabs-collapse >.nav-tabs').append('<li class="active"> 导航导航导航导航' + index +
        '<span class="del-btn">x</span></li>');
      index++;
      tabShown($('.nav-tabs-collapse >.nav-tabs').find('li:last-child'))
    });
  </script>
</body>

</html>