单页网站导航选择状态

Question

SO的新手！请建议一个更好的方式来表达这个问题:)

我有一个页面，垂直滚动网站，页脚中有一个固定的导航栏。我使用local.scroll和anchors将导航链接到页面上的div。

我希望用户能够点击一个链接并将其更改为选定状态。我只是不确定如何为单个页面设置样式/代码链接（而不是像在多个页面站点中那样为每个活动链接使用class =“select”。）

这个网站有一个我想要完成的例子： http://www.kristaganelon.com/#portfolio-section

Answer 1

您引用的示例是使用Javascript（以流行的库JQuery的形式）在导航上创建选定状态以及滚动页面。

JQuery

这个库非常适合创建您正在寻找的事件处理程序，因为它可以使用CSS设置页面样式的任何人熟悉的简单CSS选择器轻松绑定事件。 ID，类和属性的约定用于查找元素和绑定事件或更改其状态。

JQuery站点有很多有用的教程，但是简单的点击事件看起来像这样：

    $(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解决方案，因为它是临时的）。