1

New to SO! Please suggest a better way to phrase this question :)

I have a single page, vertical scrolling website with a fixed navigation bar located in the footer. I am using local.scroll and anchors to link the navigation to divs on the page.

I would like the user to be able to click on one link and have it change to a selected state. I'm just not sure how to style/code the links for a single page (instead of using class="select" for each active link as in multiple page sites.)

This site has an example of what I'd like to accomplish: http://www.kristaganelon.com/#portfolio-section

DeaconDesperado
  • 9,977
  • 9
  • 47
  • 77
Commandrea
  • 561
  • 3
  • 10
  • 24
  • You could do exactly that, as a matter of fact. When you click the link remove the selected class from the other links and then just add the selected class to the current link. I've never done it with vanilla JavaScript but this link shows you how you could http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript (as well as valid points for using jQuery) – Aaron Hathaway Jan 21 '11 at 22:36

2 Answers2

0

The example you referenced is using Javascript (in the form of the popular library JQuery) to create the selected state on the navigation as well as scroll the page.

JQuery

This library is very popular for creating the kind of event handlers you are looking for, as it easily binds events using simple CSS selectors familiar to anyone who has styled a page with CSS. The conventions of IDs, classes and attributes are used to find elements and bind events or change their states.

The JQuery site has plenty of helpful tutorials, but a simple click event looks something like this:

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

You could utilize JQuery's .addClass to make clicking the element give it certain visual state:

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

I suggest you look over the libraries documentation and learn how to first include it on your page, and then look over some basic event binding, toggling (since you'll need this to remove the active state), etc. Learning these things will help you create interactive elements much easier.

DeaconDesperado
  • 9,977
  • 9
  • 47
  • 77
0

Have a look at JQuerys .toggleClass(classname) . You could provide a fallback via css' pseudo-classes (not equal to the javascript solution since it is temporary).

RCKY
  • 43
  • 6
  • Got a hot date with JS tonight :) Thanks ya'll! I've been teaching myself design, working my way up from the basics for a couple of years, but I've been jumping around when it comes to JS, PHP, the scarier stuff. W3Schools has done me well so far. Any other suggestions for good JS learning sites? – Commandrea Jan 21 '11 at 23:19