單頁網站導航所選狀態

Question

SO的新手！ 請提出一個更好的方式來表達這個問題:)

我有一個單頁的垂直滾動網站，頁腳中有一個固定的導航欄。 我正在使用local.scroll和anchors將導航鏈接到頁面上的div。

我希望用戶能夠單擊一個鏈接並將其更改為選定狀態。 我只是不確定如何對單個頁面的鏈接進行樣式/編碼（而不是像在多個頁面站點中那樣，對每個活動鏈接使用class =“ select”。）

該站點提供了我要完成的示例： http : //www.kristaganelon.com/#portfolio-section

Answer 1

您引用的示例使用Javascript（以流行的庫JQuery的形式）在導航上創建選定狀態以及滾動頁面。

該庫在創建所需類型的事件處理程序方面非常受歡迎，因為它可以使用熟悉CSS樣式頁面的人熟悉的簡單CSS選擇器輕松綁定事件。 ID，類和屬性的約定用於查找元素並綁定事件或更改其狀態。

JQuery站點上有很多有用的教程，但是一個簡單的click事件看起來像這樣：

    $(document).ready(function(){
      $('.button').click(function(){
        alert('You clicked me!');
    });
});

您可以利用JQuery的.addClass來使元素單擊以使其具有一定的視覺狀態：

$(document).ready(function(){
      $('.button').click(function(){
        $(this).addClass('clicked');
    });
});

建議您查看庫文檔，並學習如何首先將其包含在頁面中，然后查看一些基本的事件綁定，切換（因為您需要使用它來刪除活動狀態），等等。學習這些內容將有所幫助您可以輕松創建交互式元素。

Answer 2

看看JQuerys .toggleClass（classname）。 您可以通過CSS的偽類提供后備廣告（由於它是臨時的，因此不等於JavaScript解決方案）。