单页网站导航所选状态

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解决方案）。