單頁傳送帶樣式幻燈片網站：瀏覽到上一張幻燈片，在瀏覽器後退按鈕上，沒有默認幻燈片？

我正在製作一個使用div /幻燈片來保存內容的網站。他們被放置在一個溢出的容器內：隱藏。導航欄使用document.getElementById（'box'）。style.left ='0px'來更改div位置以將所需div引入視圖。左側的CSS屬性被更改爲「onclick」，以將目標div引入視圖並將其他視圖推出容器查看區域。轉場動畫由CSS處理。單頁傳送帶樣式幻燈片網站：瀏覽到上一張幻燈片，在瀏覽器後退按鈕上，沒有默認幻燈片？

這裏有一個小提琴例子的鏈接。 http://jsfiddle.net/HyHmF/1/。 HTML代碼如下，

<a class="boxes" href="#" onclick="document.getElementById('box1').style.left='0px'; 
            document.getElementById('box2').style.left='200px'; 
            document.getElementById('box3').style.left='400px';">Box 1</a> 

<a class="boxes" href="#" onclick="document.getElementById('box1').style.left='-200px'; 
         document.getElementById('box2').style.left='0px'; 
         document.getElementById('box3').style.left='200px'";>Box 2</a> 

<a class="boxes" href="#" onclick="document.getElementById('box1').style.left='-400px'; 
         document.getElementById('box2').style.left='-200px'; 
         document.getElementById('box3').style.left='0px'">Box 3</a> 
<div id="boxcontainer"> 
<div id="box1">Box 1</div> 
<div id="box2">Box 2</div> 
<div id="box3">Box 3</div> 
</div>

我的問題是這樣的。如何使瀏覽器返回按鈕來更改CSS以將先前顯示的div引入到視圖中。也就是說，沒有迴歸到'家'div。

我對JavaScript和jquery非常熟悉。我知道答案在於JQuery BBQ pushstates和主題標籤。不幸的是，我一直無法將這些實現到我的網站@http://www.sumoto.com.au。小提琴基本上是這個網站，縮小了，以便解釋我的困境。基本上，我該如何將當前css視圖的'快照'保存爲標籤網址，並通過瀏覽器的後退/前進導航來調用此'保存'？

來源

2013-07-20 Desmond Mond

我解決了我的問題！

我刪除了a元素中所有雜亂的onclick行。併爲每個人添加了ID。實際的hashtag /瀏覽器後退按鈕功能由Ben Alman的hashchange提供，當然還有JQuery。

修改後的HTML是：

<a class="boxes" id="link1" href="#box_1">Box 1</a> 
<a class="boxes" href="#box_2">Box 2</a> 
<a class="boxes" href="#box_3">Box 3</a>      
<div id="boxcontainer"> 
<div id="box1">Box 1</div> 
<div id="box2">Box 2</div> 
<div id="box3">Box 3</div> 
</div>

JavaScript的

$(document).ready(function() { 
    $(window).hashchange(function(){ 
    var hash = location.hash; 
    var lc1 = $("#link1") 
    if (lc1.attr('href') === hash) {document.getElementById('box1').style.left='200px';} 
    if (lc1.attr('href') !== hash) {document.getElementById('box1').style.left='0px';} 
    }); 
    $(window).hashchange(); 
});

的一個環節是由腳本針對性和分配一個變種; 「LC1」。 if語句檢查lc1的哈希（鏈接）是否等於瀏覽器url。如果是，則執行css操作併發生滑動運動。如果不是（例如，當用戶點擊返回時），這些框會返回到它們原來的（或之前的）構象。

來源

2013-07-21 10:58:28

單頁傳送帶樣式幻燈片網站：瀏覽到上一張幻燈片，在瀏覽器後退按鈕上，沒有默認幻燈片？

回答

相關問題