以下是一个使用纯JavaScript实现切换活动选项卡的示例代码：

HTML代码：

  
Tab 1
  
Tab 2
  
Tab 3



  
Content 1
  
Content 2
  
Content 3

CSS代码：

.tab-container {
  display: flex;
}

.tab {
  padding: 10px;
  background-color: lightgray;
  cursor: pointer;
}

.content {
  display: none;
  padding: 10px;
  background-color: white;
}

JavaScript代码：

var tabs = document.getElementsByClassName('tab');
var contents = document.getElementsByClassName('content');

function changeTab(index) {
  // 隐藏所有内容
  for (var i = 0; i < contents.length; i++) {
    contents[i].style.display = 'none';
  }

  // 移除所有选项卡的活动样式
  for (var i = 0; i < tabs.length; i++) {
    tabs[i].classList.remove('active');
  }

  // 显示选定的内容
  contents[index].style.display = 'block';

  // 添加活动样式到选定的选项卡
  tabs[index].classList.add('active');
}

在这个示例中，我们使用getElementsByClassName方法获取选项卡和内容的元素，并通过onclick事件调用changeTab函数来切换选项卡。在changeTab函数中，我们首先隐藏所有的内容，然后移除所有选项卡的活动样式。接着，显示选定的内容并给选定的选项卡添加活动样式。

通过CSS，我们设置了选项卡和内容的样式，其中活动选项卡的样式可以通过添加一个名为active的类来实现。