將頁面加載和導出爲帶有導航列表的分區

我已經對此問題做了充分的研究，尚未找到適用於我的解決方案。如果你去this link，你會看到我已經使用了一個工作來創建一個鏈接到iFrame Vimeo嵌入的列表。我對此很滿意，但是當點擊導航列表中的另一個標題時，視頻繼續播放，因爲視頻只是被溢出堆疊和隱藏。我使用這個內容切換器（）作爲起點，沒有JS，然後當我將JS合併到Firefox中時，視頻停止播放，但此修補程序在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

來源

2011-11-16 user1048876

它本來如果你發佈你的codew在這裏也很容易，但是從你的文章中，我收集，一旦您導航遠離它每幀爲「隱藏」。我認爲克服這個問題的最好方法是通過使用html（）函數來「刪除」每一幀隱藏它們的內容。所以每次標題被點擊時，使用例如$("#frame").html("<frame ... ")來更改主框架的html內容。你可以在這裏閱讀更多：HTTP：//api.jquery.com/html/

如果您還有其他questio，只是張貼你的代碼，我會爲您解決問題

來源

2011-11-16 04:30:42

我編輯的內容，以便你可以看看我在做什麼：http://melissaloucastellano.com/testsite/index.html#four。感謝您的及時回覆！非常感謝。我覺得JS的方式太複雜了，但我不介意使用它，如果我可以使它適用於所有瀏覽器！ – user1048876

將頁面加載和導出爲帶有導航列表的分區

回答

相關問題