無法獲得分頁工作滾動網站

Question

我有一個水平滾動網站，我不能讓導航鏈接保持活動時，每個部分進入視圖。我的意思是我讓他們一次工作，但是當我刷新頁面時，他們消失了，當你第一次來到站點時，顯示div鏈接不活躍。我已經嘗試了幾個方法從這個網站，但沒有運氣。請幫助！

這是不正確的代碼（我是一個jQuery/JavaScript的小白）：

$('a.panel').bind('click',function(event){ 
    $('a.panel').removeClass('active'); 
    $(this).addClass('active'); 
}); 

我的HTML是這樣的：

<nav> 
    <li><a href="#1" class="panel">home</a></li> 
    <li><a href="#2" class="panel">about</a></li> 
    <li><a href="#3" class="panel">work</a></li> 
</nav> 

<div id="content"> 
    <div id="mask"> 
     <section id="1">home content</section> 
     <section id="2">about content</section> 
     <section id="3">work content</section> 
    </div> 
</div> 

Answer 1

在頁面加載，你需要設置鏈接活躍

$(document).ready(function() { 
    if (!location.hash) { 
     $('a.panel:first').addClass('active'); 
    } else { 
     $('a.panel[href=' + location.hash + ']').addClass('active'); 
    } 

    $('a.panel').bind('click', function(event) { 
     $('a.panel').removeClass('active'); 
     $(this).addClass('active'); 
    }); 
}); 

Answer 2

你有一個函數來更新類，但是定義一個函數並不會讓它運行。它只在用戶點擊a.panel元素時運行。

如果你想在頁面加載/刷新上運行，你需要一些方法來找出活動元素是什麼。在刷新頁面後，是否有相同的元素會激活？如果是這樣，也許你可以嘗試store.js。可能有更簡單的答案，但我想不出任何我的頭頂。

Answer 3

嗯之一......你也可以使用jQuery.waypoints： http://imakewebthings.com/jquery-waypoints/#get-started

Answer 4

刷新後，你失去了HTML狀態已修改通過Javascript。

你有2個選擇：從URL哈希

獲得價值，並呼籲trigger

var hash = window.location.hash; 
$('nav').eq(hash-1).trigger('click'); 

或存儲數據的高速緩存或webstorage，...