使用javascript 点击tab栏切换事件代码记录

如下图实现以下两点功能：

这里做代码记录

1. javascript 点击tab栏动态切换内容，并添加active

2. javascript 点击左右图标可以向左或者向右移动元素

第1点功能：

// tab栏
<div class="left">
              <span class="tab active" onclick="changeTab('personCon',event)"
                >个人业务</span
              ><span class="tab" onclick="changeTab('publicCon',event)"
                >对公业务</span
              ><span class="tab" onclick="changeTab('licenseCon',event)"
                >证照办理</span
              >
            </div>

// tab栏对应的内容
<div class="tabItem none" id="personCon">
    <div class="business-list">这里是个人业务</div>
</div>
<div class="tabItem none" id="publicCon">
    <div class="business-list">这里是对公业务</div>
</div>
<div class="tabItem none" id="licenseCon">
    <div class="business-list">这里是证照办理</div>
</div>

// js执行事件
function changeTab(tabId, e) {
      let tabItems = document.querySelectorAll('.tabItem');
      tabItems.forEach(function (item) {
        item.classList.remove('show');
        item.classList.add('none');
      });

      let tabs = document.querySelectorAll('.tab');
      tabs.forEach(function (item) {
        item.classList.remove('active');
      });

      // 显示选中当前的tab
      e.target.classList.add('active');

      // 显示当前选中的 tabItem
      let activeTab = document.getElementById(tabId);
      activeTab.classList.add('show');
    }

第2点功能，改变ul的style，tanlateX 移动

<div class="business-list">
              <div class="list-left" onclick="moveEvent('listLeft',event)">
                <img src="./assets/zj.png" />
              </div>
              <div class="list-box">
                <ul class="list">
                  <li>
                    <img src="./assets/jsld.png" />
                    <span>家属来队</span>
                  </li>
                  <li>
                    <img src="./assets/xjsq.png" />
                    <span>休假申请</span>
                  </li>
                  <li>
                    <img src="./assets/xxwh.png" />
                    <span>信息维护</span>
                  </li>  
              </div>

              <div class="list-right" onclick="moveEvent('listRight',event)">
                <img src="./assets/yj.png" />
              </div>
            </div>

let currentIndex = 0;
    let listWidth = 150; // li 元素的宽度

    function moveEvent(direction, event) {
      event.stopPropagation();
      if (direction === 'listLeft') {
        currentIndex--;
      } else if (direction === 'listRight') {
        currentIndex++;
      }

      updateListPosition();
    }

    function updateListPosition() {
      let ul = document.querySelector('.list');
      let newPosition = currentIndex * listWidth;
      ul.style.transform = 'translateX(' + newPosition + 'px)';
    }