易企秀网站开发语言重庆网站建设cqhtwl

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

这里做代码记录

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');});// 显示选中当前的tabe.target.classList.add('active');// 显示当前选中的 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>信息维护</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)';}