JS+DIV+CSS实现的经典标签切换效果代码

JS+DIV+CSS实现的经典标签切换效果，通常需要使用JavaScript实现动态的切换效果，具体步骤如下：

1. HTML结构

首先，我们需要编写HTML代码，包含表示标签的ul列表和对应内容的div块，例如：

<ul class="tab-header">
  <li class="active">Tab1</li>
  <li>Tab2</li>
  <li>Tab3</li>
</ul>
<div class="tab-content">
  <div class="tab-item active">
    <p>Content 1...</p>
  </div>
  <div class="tab-item">
    <p>Content 2...</p>
  </div>
  <div class="tab-item">
    <p>Content 3...</p>
  </div>
</div>

其中，ul表示标签的标题，每个li标签表示一个标签，class="active"表示当前激活标签的样式，div.tab-content为对应内容的容器，每个div.tab-item表示一个标签页的内容。

1. CSS样式

接下来，我们需要编写CSS样式，包括包含标签标题的ul元素和包含标签页内容的div元素的样式，例如：

/* 标签标题样式 */
.tab-header {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid #ccc;
}
.tab-header li {
  display: inline-block;
  padding: 3px 10px;
  background-color: #eee;
  cursor: pointer;
}
.tab-header li.active {
  background-color: #fff;
  border-bottom: 1px solid #fff;
}

/* 标签页内容样式 */
.tab-content {
  border: 1px solid #ccc;
  padding: 10px;
}
.tab-item {
  display: none;
}
.tab-item.active {
  display: block;
}

其中，样式需要分别设置标签标题和标签页容器的样式，使用display属性为标签页内容设置默认为不可见（display:none），当对应标签被激活时显示（display:block）。

1. JavaScript代码

最后，我们需要编写JavaScript代码，实现标签切换的功能。具体实现过程如下：

//获取标签标题和标签页元素
var tabHeaders = document.querySelectorAll('.tab-header li');
var tabItems = document.querySelectorAll('.tab-item');

//循环绑定CLICK事件
for (var i = 0; i < tabHeaders.length; i++) {
  var tabHeader = tabHeaders[i];
  tabHeader.onclick = function() {
    //获取被点击的标签位置
    var index = this.dataset.index;

    //激活对应的标签和标签页内容
    for (var j = 0; j < tabHeaders.length; j++) {
      if (j == index) {
        tabHeaders[j].classList.add('active');
        tabItems[j].classList.add('active');
      } else {
        tabHeaders[j].classList.remove('active');
        tabItems[j].classList.remove('active');
      }
    }
  }

  //设置标签位置索引
  tabHeader.dataset.index = i;
}

其中，JavaScript代码通过循环绑定click事件，处理被点击的标签索引位置，然后通过循环激活对应的标签和标签页内容的样式。

示例1：

你可以参考下面的代码实现：https://codepen.io/anon/pen/qpXbjN

示例2：

另外，你可以参考下面的优化代码，使用事件代理实现标签切换的效果，可以提高性能：https://codepen.io/anon/pen/mpZvmy