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

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

一、需求分析

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

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

二、代码实现

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

示例1

1. HTML结构

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

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结构

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

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');
  })
})

三、总结

以上就是实现简洁的滑动门菜单效果的完整攻略和两个示例代码实现。要注意的是，在实现过程中，需要灵活运用HTML、CSS和JavaScript等技术，同时要注意代码的可读性和可维护性。希望对您有所帮助！