gpt4 book ai didi

javascript - 将页面加载和卸载到带有导航列表的 Div 中

转载 作者:行者123 更新时间:2023-11-28 14:24:29 25 4
gpt4 key购买 nike

我已经对这个问题进行了大量研究,但尚未找到适合我的解决方案。如果你去 this link ,您会看到我使用变通方法创建了一个列表,该列表链接到 iFrame Vimeo 嵌入。我对此没有意见,但是当单击导航列表中的另一个标题时,视频会继续播放,因为视频只是堆叠并被溢出隐藏。我使用此内容切换器 () 作为起点,没有 JS,然后当我在 Firefox 中合并 JS 时,视频停止相互播放,但此修复在 Chrome 或 IE 中不起作用 (here's the link so you can test for yourselves)。

您会通过我的代码(和问题)注意到我不是程序员,但我正在努力学习。如果有人可以帮助我理解为什么这与 Firefox 以外的任何其他浏览器不兼容,将不胜感激。我很想更好地理解 JS,而且我知道 JS 文件中有很多不需要的额外语法。如果有人可以帮助我解决问题,我将不胜感激!

感谢您阅读本文!

    <body style="width: 98%;">

<div style="width: 625px; margin: 0 auto 0 auto;">

<div id="content-slider">
<ul id="content-slider-inside">
<li id="one"><object type="text/html" data="levelland.html" style="width:100%; height:400px; margin:1%;"></object></a></li>
<li id="two"><object type="text/html" data="legacy.html" style="width:100%; height:400px; margin:1%;"></object></a></li>
<li id="three">3</li>
<li id="four">4</li>
<li id="five">5</li>
</ul>
</div>

<ul id="navigation">
<li><a href="#one" class="selected">1</a></li>

<li><a href="#two">2</a></li>
<li><a href="#three">3</a></li>
<li><a href="#four">4</a></li>
<li><a href="#five">5</a></li>
</ul>

    $(document).ready(
function() {

var currentHash = location.hash.split("#");

if (currentHash.length > 1) {

var currentHashString = currentHash[1].toString();

$("#navigation li a").removeClass("selected");

$("#navigation li a[href*="+currentHashString+"]").addClass("selected");

var contentCollection = document.getElementsByTagName("li");

for (i=0;i<contentCollection.length;i++) {
if (contentCollection[i].id) {
if (contentCollection[i].id === currentHashString || currentHashString === "") {
$(contentCollection[i]).fadeIn(650);
} else {
$(contentCollection[i]).fadeOut(650).css("display", "none");
if (location.hash !== "#") {
location.hash = "#"+currentHash[1];
} // if
} // else
} // if
} // for

} else {
var contentCollection = document.getElementsByTagName("li");

for (i=0;i<contentCollection.length;i++) {
if (contentCollection[i].id) {
if (contentCollection[i].id !== "one") {
$(contentCollection[i]).fadeOut(650).css("display", "none");
}
} // if
} // for
} // else

$("#navigation li a").click(function() {

var myClicked = this.href.split("#");

$("#navigation li a").removeClass("selected");

this.className = "selected";

var contentCollection = document.getElementsByTagName("li");

for (i=0;i<contentCollection.length;i++) {
if (contentCollection[i].id) {
if (contentCollection[i].id === myClicked[1]) {
$(contentCollection[i]).fadeIn(650);
} else {
$(contentCollection[i]).fadeOut(650).css("display", "none");
if (location.hash !== "#") {
location.hash = "#"+myClicked[1];
}

} // else

} // if
} // for
return false;
} // click func

); // click event
} // anon func 1

); // ready

最佳答案

如果您也在这里发布您的代码会容易得多,但是从您的帖子中我了解到,一旦您离开它,每个框架都是“隐藏的”。我认为解决这个问题的最好方法是“删除”每一帧,而不是使用 html() 函数隐藏它们。所以每次点击标题时,使用例如$("#frame").html("<frame ... ")更改主框架的 html 内容。你可以在这里阅读更多内容:http://api.jquery.com/html/

如果你有进一步的问题,只需发布​​你的代码,我会为你解决

关于javascript - 将页面加载和卸载到带有导航列表的 Div 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8146528/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com