1

I am trying to create a navbar that will dynamically pick up the class 'acvtive' showing when a link in the navigation bar is active - this will be on a one page website, so i'm using ID's, here's what my HTML looks like

<section class="screen1" id="home">

<div class="container">
    <div class="sixteen columns">
        <h1 class="hero-h1">Lorem Ipsum</h1>
        <h2 class="hero-h2">Lorem Ipsum</h2>
    </div>
</div>

<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About Me</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#blog">Blog</a></li>
        <li><a href="#contact">Contact Me</a></li>
    </ul>
</nav>

every new "screen" is a new page, so each section is the same but has #about, #services, etc. now, when I click on a link in the navigation menu or scroll down the page I would like it to pick up the active state I have created in CSS and on page load I would like it to have home already active (my class is called active in CSS).

How is it possible to change from #home to #about, etc. having the active state on a one page website? Is there any jquery, javascript, or something I can use?

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
user3441508
  • 35
  • 2
  • 7
  • 1
    dupes galore: http://stackoverflow.com/questions/18455070/how-to-achieve-active-state-in-a-navigation-for-a-one-page-website, http://stackoverflow.com/questions/15005731/set-active-state-on-navigation-dynamically - all showing different ways. – patricksweeney May 28 '14 at 20:40
  • If this is a one-page website, then your links shouldn't actually submit a new request. You should just toggle a class on click. – crush May 28 '14 at 20:40

3 Answers3

1

You can use jQuery to detect when one of the links is clicked on and add the active class to the link. This is done using the click method, you can see the documentation here. Here is an example that will add the active class to any link clicked within the navigation.

$("nav a").click(function() {

   // Remove the active class from the element that is currently active
   $(".active").removeClass("active");  

   // Add the active class to the element that was just clicked
   $(this).addClass("active");

   return false;
});

You may add the class active to your Home so that it is active when loading the page for the first time.

feupeu
  • 819
  • 7
  • 25
PhoenixWing156
  • 382
  • 1
  • 8
  • Thanks for your help, this seems to work perfectly other than when simply scrolling the website rather than following the links, the active state doesn't update, how can I do that? And also, I've just realised that it changes the class to active, however doesn't follow the link? – user3441508 May 28 '14 at 20:52
0

This small script uses jQuery and will add the active class to any link that is clicked, and remove the active class from the other links. This is very basic, but should get you started.

<script>
    $(document).ready(function () {
        $("nav a").click(function () {
            $("nav a").removeClass("active");
            $(this).addClass("active");
        });
    });
</script>

Here is an example: http://jsfiddle.net/by2c6/

Howard Renollet
  • 4,609
  • 1
  • 24
  • 31
  • This works perfectly for just simply clicking the links, but how would I go about changing the active state when scrolling the website? Because otherwise it always remains with the active state on the last clicked menu item. Thanks for your help. – user3441508 May 28 '14 at 20:48
  • you can use a combination of scrollTop() and outerHeight() to detect the scroll position. I could give more detail if I had more complete code, however, your question clearly asks how to assign the active state if the link is clicked – Howard Renollet May 28 '14 at 20:52
  • what code would you need? would I have to get the heights of each page and the distance from page to page in pixels to set this up? – user3441508 May 28 '14 at 20:56
0

You can use AngularJS framework. It can let you update part of your page in a single html page. I can give an example on my github: personal portfolio

Stephanie Yang
  • 252
  • 1
  • 4
  • 13