Question

我在我的网站上有以下代码来显示/隐藏几个iframe。我实际上有7个其他具有相同代码的div，以显示与每个链接关联的div并隐藏所有其他。除了我添加的最新版本（iframe9）之外，每个div都有效。据我所知，前8个div的代码完全相同，但由于某种原因，第9个不会切换。

CSS似乎工作正常。我可以通过在CSS的第一部分添加或删除div来显示或隐藏div。

以下是我的HTML

<div id="link" onClick="toggleFrame8();"><p class="frame-colors" style="text-align: center;">Frame8</p></div>

&nbsp;

<div id="iframe8" class="frame-container"><iframe src="https://www.google.com/" width="800" height="460" frameborder="0" marginwidth="0" marginheight="0">Loading...</iframe></div>
<br id="br8">

&nbsp;

<div id="link" onClick="toggleFrame9();"><p class="frame-colors" style="text-align: center;">Frame9</p></div>

&nbsp;

<div id="iframe9" class="frame-container"><iframe src="https://www.google.com/" width="800" height="460" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe></div>
<br id="br9">

下面应该是适用的CSS

#iframe8, #br8, #iframe9, #br9 {
    display: none;
}

.frame-container {
    border: 2px solid #ffd700;
    height: 0;
    position: relative;
    padding-bottom: 75%;
    overflow: hidden;
 }
.frame-container iframe {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#link {
    cursor: pointer;
}

以下是JS

var Frame8 = document.getElementById("iframe8");                
var Break8 = document.getElementById("br8");    
var Frame9 = document.getElementById("iframe9");                
var Break9 = document.getElementById("br9"); 

function toggleFrame8() {                   
    Frame8.style.display = ((Frame8.style.display!='block') ? 'block' : 'none');                    
    Break8.style.display = ((Break8.style.display!='inline') ? 'inline' : 'none');                  
    if (Frame8.style.display === "block" || Break8.style.display === "block") {                         
    Frame9.style.display = "none";                  
    Break9.style.display = "none";              
    }           
} 

function toggleFrame9() {                   
    Frame9.style.display = ((Frame9.style.display!='block') ? 'block' : 'none');                    
    Break9.style.display = ((Break9.style.display!='inline') ? 'inline' : 'none');                  
    if (Frame9.style.display === "block" || Break9.style.display === "block") {                         
    Frame8.style.display = "none";                  
    Break8.style.display = "none";              
    }           
}

我真的希望有人可以指出我的代码可能是一个明显的问题。

几乎相同的JavaScript不起作用

0 个答案: