下面我将详细讲解“js实现简洁的滑动门菜单(选项卡)效果代码”的完整攻略。

一、需求分析

我们需要实现一个简洁的滑动门菜单效果，点击菜单选项时，显示对应的内容区域，同时将当前选项高亮显示。具体实现步骤如下：

1. 定义html结构，包含菜单选项和对应的内容区域。
2. 使用CSS设置菜单选项和内容区域的布局样式，使其呈现滑动门效果。
3. 使用JavaScript实现点击事件，控制对应内容区域的显示和当前选项的高亮。

二、代码实现

接下来，我将分两个示例进行代码实现说明。

示例1

1. HTML结构

<p class="menu">  <ul>    <li class="active">选项1</li>    <li>选项2</li>    <li>选项3</li>  </ul>  <p class="content active">内容1</p>  <p class="content">内容2</p>  <p class="content">内容3</p></p>

2. CSS样式

.menu {  display: flex;  flex-direction: column;  align-items: center;}ul {  display: flex;  list-style: none;  padding: 0;  margin: 0;}li {  padding: 10px;  cursor: pointer;  margin: 10px;  border: 1px solid #333;}.content {  padding: 20px;  display: none;}.active {  background-color: #333;  color: #fff;}li.active {  color: #fff;}

3. JavaScript实现

function toggleMenu(index) {  const contents = document.querySelectorAll('.content');  const items = document.querySelectorAll('li');  [...contents].forEach(content => {    content.classList.remove('active');    content.style.display = 'none';  })  [...items].forEach(item => {    item.classList.remove('active');  })  contents[index].classList.add('active');  contents[index].style.display = 'block';  items[index].classList.add('active');}const items = document.querySelectorAll('li');[...items].forEach((item, index) => {  item.addEventListener('click', () => {    toggleMenu(index);  })})

示例2

1. HTML结构

<p class="menu">  <ul>    <li class="active">选项1</li>    <li>选项2</li>    <li>选项3</li>  </ul>  <p class="slider"></p>  <p class="content active">内容1</p>  <p class="content">内容2</p>  <p class="content">内容3</p></p>

2. CSS样式

.menu {  position: relative;  min-height: 100px;}ul {  display: flex;  list-style: none;  padding: 0;  margin: 0;}li {  padding: 10px;  cursor: pointer;  margin: 10px;  border: 1px solid #333;  z-index: 1;}.slide {  position: absolute;  top: 0;  left: 0;  width: 80px;  height: 100%;  background-color: #333;  z-index: -1;  transition: 0.3s ease;}.content {  padding: 20px;  display: none;  z-index: -1;  position: absolute;  top: 0;  left: 0;}.active {  background-color: #333;  color: #fff;  z-index: 10;}li.active ~ .slide {  transform: translateX(calc(100% / 3 * (1 - var(--index))));}

3. JavaScript实现

const items = document.querySelectorAll('li');const slide = document.querySelector('.slide');const contents = document.querySelectorAll('.content');[...items].forEach((item, index) => {  item.addEventListener('click', () => {    slide.style.setProperty('--index', index);    [...items].forEach(item => {      item.classList.remove('active');    })    [...contents].forEach(content => {      content.classList.remove('active');    })    item.classList.add('active');    contents[index].classList.add('active');  })})

三、总结