使用原生js实现以下效果： 1.实现选项卡动态添加 2.实现选项卡切换 内容区域同步变化 3.实现选项卡删除

好的，我来为您解答。首先需要一个 HTML 结构，如下：

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

然后，我们使用原生 JS 实现以下效果：

1. 实现选项卡动态添加

var tabNav = document.querySelector('.tab-nav');
var tabContent = document.querySelector('.tab-content');

// 添加选项卡
function addTab(title, content) {
  var index = tabNav.children.length; // 选项卡索引
  var li = document.createElement('li');
  li.innerText = title;
  li.setAttribute('data-index', index); // 设置索引
  tabNav.appendChild(li);
  
  var div = document.createElement('div');
  div.classList.add('tab-pane');
  div.innerText = content;
  div.setAttribute('data-index', index); // 设置索引
  tabContent.appendChild(div);
}

addTab('选项卡2', '选项卡2的内容');

2. 实现选项卡切换

// 切换选项卡
function switchTab(index) {
  var activeLi = tabNav.querySelector('.active');
  var activeDiv = tabContent.querySelector('.active');
  if (activeLi) activeLi.classList.remove('active');
  if (activeDiv) activeDiv.classList.remove('active');
  
  var li = tabNav.querySelector(`li[data-index="${index}"]`);
  var div = tabContent.querySelector(`div[data-index="${index}"]`);
  if (li) li.classList.add('active');
  if (div) div.classList.add('active');
}

// 点击切换选项卡
tabNav.addEventListener('click', function(e) {
  var li = e.target.closest('li');
  if (li) {
    var index = li.getAttribute('data-index');
    switchTab(index);
  }
});

3. 实现选项卡删除

// 删除选项卡
function removeTab(index) {
  var li = tabNav.querySelector(`li[data-index="${index}"]`);
  var div = tabContent.querySelector(`div[data-index="${index}"]`);
  if (li) tabNav.removeChild(li);
  if (div) tabContent.removeChild(div);
}

// 双击删除选项卡
tabNav.addEventListener('dblclick', function(e) {
  var li = e.target.closest('li');
  if (li) {
    var index = li.getAttribute('data-index');
    removeTab(index);
  }
});

以上就是使用原生 JS 实现选项卡动态添加、切换和删除的代码。