JS实现简单的tab切换选项卡效果

JS实现简单的tab切换选项卡效果，可以通过以下步骤实现：

1. 编写HTML结构

首先，需要在HTML中编写出选项卡的结构，例如：

<ul class="tab-nav">
  <li class="active">选项卡1</li>
  <li>选项卡2</li>
  <li>选项卡3</li>
</ul>
<div class="tab-content">
  <div class="tab-panel active">内容1</div>
  <div class="tab-panel">内容2</div>
  <div class="tab-panel">内容3</div>
</div>

其中，.tab-nav是选项卡的导航菜单，.tab-content是选项卡的内容容器，.active表示默认选中状态。

2. 编写CSS样式

为了让选项卡具有好看的外观，需要编写CSS样式，例如：

.tab-nav li {
  display: inline-block;
  cursor: pointer;
  padding: 10px 20px;
  border: 1px solid #ccc;
}

.tab-nav li.active {
  background-color: #fff;
  border-bottom: none;
}

.tab-content .tab-panel {
  display: none;
  padding: 20px;
}

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

其中，.tab-nav li表示选项卡导航菜单的样式，.tab-nav li.active表示当前选中的选项卡的样式，.tab-content .tab-panel表示选项卡内容的样式，.tab-content .tab-panel.active表示当前选中的选项卡内容的样式。

3. 编写JS代码

最后，需要编写JS代码来实现选项卡的切换效果，例如：

var navItems = document.querySelectorAll('.tab-nav li');
var tabPanels = document.querySelectorAll('.tab-content .tab-panel');

function switchTab(index) {
  // 先将所有选项卡和内容去掉active类
  for (var i = 0; i < navItems.length; i++) {
    navItems[i].classList.remove('active');
    tabPanels[i].classList.remove('active');
  }
  // 再将当前选项卡和内容添加active类
  navItems[index].classList.add('active');
  tabPanels[index].classList.add('active');
}

// 给选项卡添加点击事件
for (var i = 0; i < navItems.length; i++) {
  navItems[i].addEventListener('click', function() {
    // 获取当前选项卡的索引
    var index = Array.prototype.indexOf.call(navItems, this);
    switchTab(index);
  });
}

// 默认选中第一个选项卡
switchTab(0);

在这段代码中，首先通过querySelectorAll获取选项卡导航菜单和选项卡内容，然后定义了一个switchTab函数用于切换选项卡，接着给所有选项卡添加点击事件，点击时调用switchTab函数切换选项卡，最后通过switchTab(0)将第一个选项卡设为默认选中状态。

示例说明

示例1：简单的选项卡切换

这是一个简单的选项卡切换示例，只有3个选项卡，没有任何动态效果。

参考代码：https://codepen.io/anon/pen/wXEKoW

示例2：带有动态效果的选项卡

这是一个带有动态效果的选项卡示例，当鼠标移入选项卡时，选项卡会有缓慢滑动的效果。

参考代码：https://codepen.io/anon/pen/MOgQmy