html 滑动门效果,js实现简洁的左侧滑动门菜单(选项卡)效果代码

以下是使用 JavaScript 实现简洁的左侧滑动门菜单(选项卡)效果的代码：

HTML 代码：

<div class="menu">
  <div class="tab active" data-tab="tab1">Tab 1</div>
  <div class="tab" data-tab="tab2">Tab 2</div>
  <div class="tab" data-tab="tab3">Tab 3</div>
  <div class="slider"></div>
</div>
<div class="content">
  <div class="tab-content active" data-tab="tab1">Content for Tab 1</div>
  <div class="tab-content" data-tab="tab2">Content for Tab 2</div>
  <div class="tab-content" data-tab="tab3">Content for Tab 3</div>
</div>

CSS 代码：

.menu {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 200px;
  height: 300px;
  background-color: #f0f0f0;
}

.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  cursor: pointer;
}

.tab.active {
  background-color: #ccc;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 50px;
  background-color: #000;
  transition: transform 0.3s ease-in-out;
}

.content {
  flex: 1;
  padding: 10px;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

JavaScript 代码：

// 获取菜单和标签页元素
const tabs = document.querySelectorAll('.tab');
const tabContents = document.querySelectorAll('.tab-content');
const slider = document.querySelector('.slider');

// 给菜单项添加事件监听器
tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // 移除所有菜单项的 active 类
    tabs.forEach(item => {
      item.classList.remove('active');
    });
    // 给当前点击的菜单项添加 active 类
    tab.classList.add('active');
    // 获取当前菜单项的索引值
    const index = Array.from(tabs).indexOf(tab);
    // 移动滑动门到当前菜单项的位置
    slider.style.transform = `translateY(${index * 50}px)`;
    // 隐藏所有标签页
    tabContents.forEach(content => {
      content.classList.remove('active');
    });
    // 显示对应的标签页
    tabContents[index].classList.add('active');
  });
});

以上代码实现了一个左侧滑动门菜单(选项卡)效果，可以根据实际需求进行修改和扩展。