单页网站导航选中状态

新功能！请建议一个更好的方式来短语这个问题:)单页网站导航选中状态

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

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

此站点有一个示例， d喜欢实现： http://www.kristaganelon.com/#portfolio-section

2011-01-21 Commandrea

事实上，你完全可以做到这一点。当您单击该链接时，从其他链接中移除选定的班级，然后将所选班级添加到当前链接。我从来没有用香草JavaScript做过，但这个链接告诉你如何可以http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript（以及有效的使用点jQuery） – 2011-01-21 22:36:51

您引用的示例是使用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'); 
    }); 
});

我建议你看看库文档，并学习如何首先将它包含在你的页面上，然后查看一些基本的事件绑定，切换（因为你需要这个去除活动状态）等。这些东西会帮助你创建互动元素更容易。

来源

2011-01-21 22:36:59 DeaconDesperado

我非常感谢你的帮助！关闭jquery土地！ – Commandrea 2011-01-21 22:40:24

看看JQuerys .toggleClass(classname) 。你可以通过css的伪类提供回退（不等于javascript解决方案，因为它是临时的）。

来源

2011-01-21 22:46:12 RCKY

与JS今晚有一个热门的日期:)谢谢你们！我一直在教自己的设计，从基础开始工作了几年，但当谈到JS，PHP和可怕的东西时，我一直在跳来跳去。到目前为止，W3Schools做得很好。任何其他建议的良好JS学习网站？ – Commandrea 2011-01-21 23:19:33

单页网站导航选中状态

回答

相关问题