html tab切换

html tab切换是一种常见的网页交互效果，可以通过点击不同的标题来显示不同的内容区域。实现这个效果的思路是给每个标题绑定事件，当点击某个标题时，显示对应的内容区域，同时隐藏其他内容区域。

具体的实现步骤如下：
1. 在HTML中创建四个标题和四个内容区域，可以使用<ul>和<li>来创建标题列表，使用<div>来创建内容区域。
2. 使用JavaScript监听标题的点击事件，当点击某个标题时，获取该标题对应的索引值。
3. 根据索引值找到对应的内容区域，将其显示出来，并隐藏其他内容区域。

这里提供一个基本的HTML结构和JavaScript代码的示例供参考：

HTML部分：

<ul class="tab-title">
  <li class="active">标题一</li>
  <li>标题二</li>
  <li>标题三</li>
  <li>标题四</li>
</ul>

<div class="tab-content">
  <div class="content active">内容一</div>
  <div class="content">内容二</div>
  <div class="content">内容三</div>
  <div class="content">内容四</div>
</div>

CSS部分：

.tab-title li {
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
}

.tab-content .content {
  display: none;
}

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

JavaScript部分：

var titles = document.querySelectorAll('.tab-title li');
var contents = document.querySelectorAll('.tab-content .content');

for (var i = 0; i < titles.length; i++) {
  titles[i].addEventListener('click', function() {
    // 移除所有标题的 active 类
    for (var j = 0; j < titles.length; j++) {
      titles[j].classList.remove('active');
    }
    
    // 隐藏所有内容区域
    for (var k = 0; k < contents.length; k++) {
      contents[k].classList.remove('active');
    }
    
    // 添加当前标题的 active 类
    this.classList.add('active');
    
    // 获取当前标题的索引值
    var index = Array.prototype.indexOf.call(titles, this);
    
    // 显示对应索引值的内容区域
    contents[index].classList.add('active');
  });
}