如何使用标签加载页面而不刷新？答案

【问题标题】：How to load page without refresh using tabs?如何使用标签加载页面而不刷新？
【发布时间】：2019-12-06 01:26:39
【问题描述】：

我一直在努力寻找解决这个问题的方法，但我真的迷路了。问题是当我移动到选项卡 2 时，我试图在 1 个选项卡上播放视频我仍然可以听到在选项卡 1 中播放的视频。如果我单击同一个选项卡，它不会再次加载。有解决办法吗？

.idTabs {padding-left:0px !important;}
.idTabs li {display:inline;padding-left:0px;}
.idTabs li a {
    padding:5px 15px;
    background-color:#2EA537;
    color:white;
    text-decoration:none;
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    -ms-transition:all 0.3s;
    -o-transition:all 0.3s;
    font-weight:bold;
    border:1px solid transparent;
    border-radius:10px 10px 0px 0px;
}
.idTabs li a:hover {
    padding:5px 15px;
    background-color:#805D5A;
    color:white;
    text-decoration:none;
}
.idTabs li a.selected {
    background-color:#42BEF8;
}
.idTabs li a.selected:hover {
    background-color:#42BEF8;
}

<script src="https://2ytube.com/jscripts/jquery.js"></script>
<script src="https://2ytube.com/templates/dark/idTabs-stramaxon.js"></script>
<ul class="idTabs"> <li><a href="#tab1" class="selected">tab 1</a></li> <li><a href="#tab2">tab 2</a></li> <li><a href="#tab3">tab 3</a></li> <li><a href="#tab4">tab 4</a></li> <li><a href="#tab5">tab 5</a></li> </ul> <div id="tab1" style="display: block;">  <iframe name="FRAME1" style="width:100%;height:400px" src="https://www.youtube.com/embed/xButjfhZWVU" allowfullscreen frameborder="0" scrolling="no"></iframe></div> <div id="tab2" style="display: none;">   <iframe name="FRAME1" style="width:100%;height:400px" src="https://www.youtube.com/embed/HMjQygwPI1c" allowfullscreen frameborder="0" scrolling="no"></iframe></div> <div id="tab3" style="display: none;">   <iframe name="FRAME1" style="width:100%;height:400px" src="https://www.youtube.com/embed/xButjfhZWVU" allowfullscreen frameborder="0" scrolling="no"></iframe></div> <div id="tab4" style="display: none;">   <iframe name="FRAME1" style="width:100%;height:400px" src="https://www.youtube.com/embed/xButjfhZWVU" allowfullscreen frameborder="0" scrolling="no"></iframe></div> <div id="tab5" style="display: none;">   <iframe name="FRAME1" style="width:100%;height:400px" src="https://www.youtube.com/embed/xButjfhZWVU" allowfullscreen frameborder="0" scrolling="no"></iframe>

我是 ajax 的初学者。

谢谢。

Codepen

【问题讨论】：

我在你的代码中看不到任何 Ajax，有一个通过 CSS 看起来像标签的列表，“li”项目包含视频的“iframe”......“标签”是什么所做的只是让他们的内容在点击时可见或不可见，这就是为什么你可以听到在“iframe”上播放的视频，当标签设置为“显示：无”时，你必须编写代码让它停止，重新加载不是问题，当您更改标签时，您的“iframe”被隐藏了......
@Atthek 如果您在任何网页中使用 Tab，请点击此链接：jqueryui.com/tabs
有没有办法一次只加载一个标签而不是一次？谢谢大家的回复

标签： jquery ajax refresh

【解决方案1】：

你应该看看这里：

https://developers.google.com/youtube/iframe_api_reference

在您的情况下，关于 player.stopVideo():Void 的部分解释了如何手动停止视频

【讨论】：

我明白你的意思似乎很神奇，但想象一下我不只使用 youtube 视频可以说任何其他嵌入网站真的很难，因为我只想在当时播放 1 个标签，而不是所有标签都加载同时。你明白我的意思吗？感谢您抽出宝贵时间回复我真的很感激
这种情况下最好使用你所使用的视频平台提供的具体API，具体情况具体情况。刚开始，您可以集成 YT API，然后，对于新的视频提供商，为这些用例找到正确的方法