选择新选项卡时卸载以前选项卡的 div 内容答案

【问题标题】：unload div content of previously tabs when new tab is selected选择新选项卡时卸载以前选项卡的 div 内容
【发布时间】：2020-07-06 01:53:47
【问题描述】：

这是我找到的答案enter link description here

但是，这种方法只是隐藏内容，并没有完全卸载或删除它们。如果使用文本或图像效果很好，但不适用于视频和音频，当播放第一个选项卡的视频内容时，然后选择下一个选项卡，视频播放仍在后台工作！我的问题是：我可以从非活动标签中完全删除内容吗？谢谢！

这里是代码Example jsfiddle

$('.nav-tab').click(function(e){

var target_tab_selector = $(this).attr('href');

 $('.tab-content').addClass('hidden');
 $('.tab-content').removeClass('active');
    $(target_tab_selector).removeClass('hidden');
    $(target_tab_selector).addClass('active');

})

.active{display:block}
.hidden{display:none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
      <body>
      <h2 class="nav-tab-wrapper">
        <a href="#tab-1" class="nav-tab nav-tab-active">First</a>
        <a href="#tab-2" class="nav-tab">Second</a>
        <a href="#tab-3" class="nav-tab">Third</a>
      </h2>
      <hr />
      <section id="tab-1" class="tab-content active">
        <P>
<iframe width="560" height="315" src="https://www.youtube.com/embed/8s3bdVxuFBs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</P>
      </section>
      <section id="tab-2" class="tab-content hidden">
        <p><video width="400" controls>
  <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video></p>
      </section>
      <section id="tab-3" class="tab-content hidden">
        <p><iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/830279092&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/uiceheidd" title="Juice WRLD" target="_blank" style="color: #cccccc; text-decoration: none;">Juice WRLD</a> · <a href="https://soundcloud.com/uiceheidd/tell-me-you-love-me" title="Tell Me U Luv Me (with Trippie Redd)" target="_blank" style="color: #cccccc; text-decoration: none;">Tell Me U Luv Me (with Trippie Redd)</a></div></p>
      </section>
    </body>
  </html>

【问题讨论】：

标签： javascript html css jquery-ui-tabs

【解决方案1】：

您应该使用 jquery remove 或标准 removeChild 方法从 DOM 中完全删除元素，而不是使用 CSS 来处理 .addClass('hidden') 和 .removeClass('active')：

jquery 删除：https://api.jquery.com/remove/
HTML DOM 移除子元素：https://www.w3schools.com/jsref/met_node_removechild.asp

【讨论】：