如何通过添加类来切换标签，并在导航栏上使用JavaScript加载模板？

<ul class="nav">
  <li class="active" onclick="loadTemplate(0)">标签1</li>
  <li onclick="loadTemplate(1)">标签2</li>
  <li onclick="loadTemplate(2)">标签3</li>
</ul>

<div class="template active">
  <!-- 标签1的内容 -->
</div>
<div class="template">
  <!-- 标签2的内容 -->
</div>
<div class="template">
  <!-- 标签3的内容 -->
</div>

.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.nav li {
  display: inline-block;
  padding: 10px;
  cursor: pointer;
}

.template {
  display: none;
}

.template.active {
  display: block;
}

function loadTemplate(index) {
  // 获取所有的标签页和内容模板
  var tabs = document.querySelectorAll('.nav li');
  var templates = document.querySelectorAll('.template');

  // 移除所有标签页的活动类
  tabs.forEach(function(tab) {
    tab.classList.remove('active');
  });

  // 添加当前标签页的活动类
  tabs[index].classList.add('active');

  // 隐藏所有内容模板
  templates.forEach(function(template) {
    template.classList.remove('active');
  });

  // 显示当前标签页对应的内容模板
  templates[index].classList.add('active');
}

window.onload = function() {
  loadTemplate(0); // 默认显示第一个标签页的内容
};