文章/答案/技术大牛

发布

社区首页 >问答首页 >选择新页签时卸载上一页签的div内容

问选择新页签时卸载上一页签的div内容
EN

Stack Overflow用户

提问于 2020-07-06 09:53:47

回答 1查看 32关注 0票数 0

这是我找到的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>

css

jquery-ui-tabs

javascript

html

回答 1

Stack Overflow用户

发布于 2020-07-06 09:58:46

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

https://api.jquery.com/remove/

HTML DOM remove子级：https://www.w3schools.com/jsref/met_node_removechild.asp

jquery remove

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62748214

复制

相似问题

问选择新页签时卸载上一页签的div内容
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问选择新页签时卸载上一页签的div内容EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问选择新页签时卸载上一页签的div内容
EN