changing active class in twitter bootstrap to the current page that user clicks on in the navigation bar

I am sure the answer to this question has been answered many times. In fact, I've been reading tons of threads regarding this question, but I still have no clue how to go about doing this. If you can help me with a very simple way of implementing the code, that would be awesome. I am a complete newbie at this, and have very little, if not, zero, knowledge of javascript.

I have a simple fixed navigation bar (of about 5 links) on the top of the site I'm currently building, using twitter bootstrap. This is a one-page scrollable website.

In twitter bootstrap, there is a class on the first link. This class is "active". It's there by default. I'm assuming this is the key to highlighting the links when a user clicks on one of the links in the navbar, ie. when the user scrolls to a certain section on the 1-page website, the corresponding navigation link gets highlighted.

I think I need to add some javascript to get this working. Or maybe I can get this working without javascript? What do I do? Please help... If you can get an example up on jsfiddle, that would be great too.

What I need help with specifically:

1) I need to incorporate smooth-scrolling on the website (which I can kinda do, using something I've searched for online, but would prefer to have a complete solution to this including the points below).

2) When user scrolls down or up my 1-page website, the navigation links changes color, according to the section they're in.

3) When user clicks on one of these navigation links, the link remains highlighted while the user reads that section of my website.

4) If I need to use javascript, do I write the javascript at the bottom of my HTML code, above the body tag? Or should I create a new .js file?

5) I need to stress that I'm a complete newbie, and that I'm using the current version of twitter bootstrap.

Answers


Ok.

  1. download http://flesler.blogspot.com/
  2. download http://github.com/davist11/jQuery-One-Page-Nav

Call js

jQuery('#top-nav').onePageNav({
scrollSpeed: 1200,
currentClass: 'active',
changeHash: true,
filter: ':not(.external)' // used for external navigation links if any <a class="external" href=""></a>

});

Add id="top-nav" to your nav


Need Your Help

Need to change the positioning of a series of elements on a page

jquery

I have the 2 divs on a page which I need to animate up (a sliding panel effect). I have each element starting with a bottom position of 0. I need to have a link which causes the div to animate upwa...

On what Standard version the Magento Enterprise version 1.8.0 is based?

php versioning magento

I need a suggestion on what Standard Magento version the Enterprise version 1.8.0 could be based?