如下圖實現(xiàn)以下兩點功能：

這里做代碼記錄

1. javascript 點擊tab欄動態(tài)切換內(nèi)容，并添加active

2. javascript 點擊左右圖標(biāo)可以向左或者向右移動元素

第1點功能：

// tab欄
<div class="left"><span class="tab active" onclick="changeTab('personCon',event)">個人業(yè)務(wù)</span><span class="tab" onclick="changeTab('publicCon',event)">對公業(yè)務(wù)</span><span class="tab" onclick="changeTab('licenseCon',event)">證照辦理</span></div>// tab欄對應(yīng)的內(nèi)容
<div class="tabItem none" id="personCon"><div class="business-list">這里是個人業(yè)務(wù)</div>
</div>
<div class="tabItem none" id="publicCon"><div class="business-list">這里是對公業(yè)務(wù)</div>
</div>
<div class="tabItem none" id="licenseCon"><div class="business-list">這里是證照辦理</div>
</div>

// js執(zhí)行事件
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');});// 顯示選中當(dāng)前的tabe.target.classList.add('active');// 顯示當(dāng)前選中的 tabItemlet 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>信息維護(hù)</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)';}