How can I automatically add and remove the active class to the navigation on a single page layout?

Question

How can I automatically add and remove the active class to the navigation on a single page layout?

Is there a way to automatically add an active class to the navbar links when a specific navigation section appears as you scroll down a one-page layout? Similarly, can the active class continue to move to the corresponding section in the nav links as you scroll back up the page?

The Bootstrap website showcases this feature on the right side of the page, where navigation links automatically change their active class as you scroll through different sections.

For further reference, visit: http://getbootstrap.com/components/

jquery css navigation

Answer 1

Answer №1

If you want to highlight navigation links based on the section displayed in your HTML documents, you can add a custom attribute to each section. Set the value of this attribute as the id of the navigation link that should be active for that section.

<section data-navlink="Link1">
...
</section>
<section data-navlink="Link2">
...
</section>
...

Next, create your navbar like this:

<ul id="navbar">
     <li id="Link1">My Link 1</li>
     <li id="Link2">My Link 2</li>
     ...
</ul>

To dynamically update the active class of nav links, use jQuery or JavaScript to bind the mouseover event for each section:

$('section[data-navlink]').on('mouseover',function(){
     $('.activenav').removeClass('activenav');
     $('li#'+$(this).attr('data-navlink')).addClass('activenav');
});

For styling, you can use the following CSS:

.activenav{
text-decoration: underline;
color: red;
font-weight: bold;
}

Check it out on JSFiddle

Answer 2

If you want to highlight navigation links based on the section displayed in your HTML documents, you can add a custom attribute to each section. Set the value of this attribute as the id of the navigation link that should be active for that section.

<section data-navlink="Link1">
...
</section>
<section data-navlink="Link2">
...
</section>
...

Next, create your navbar like this:

<ul id="navbar">
     <li id="Link1">My Link 1</li>
     <li id="Link2">My Link 2</li>
     ...
</ul>

To dynamically update the active class of nav links, use jQuery or JavaScript to bind the mouseover event for each section:

$('section[data-navlink]').on('mouseover',function(){
     $('.activenav').removeClass('activenav');
     $('li#'+$(this).attr('data-navlink')).addClass('activenav');
});

For styling, you can use the following CSS:

.activenav{
text-decoration: underline;
color: red;
font-weight: bold;
}

Check it out on JSFiddle

How can I automatically add and remove the active class to the navigation on a single page layout?

Answer №1

Similar questions

Variable used to invoke a Javascript namespace

Retrieve the image source when clicking on multiple posts that share the same div class and button class

Automatically trigger a popup box to appear following an AJAX request

Tips on creating a repeating background image with CSS for a sprite

How can JavaScript be used to make an AJAX request to a server-side function?

How to Hide Validation Messages Automatically Using Knockout on Page Load

`Looking for images for the jstree jQuery plugin?`

Centering H1 and dropdown button horizontally using Bootstrap

Interacting with CSS buttons using Selenium

What are some ways to ensure a JQM-created button is clickable in Firefox?

Personalized CSS styling for Jquery Mobile version 1.3

What is the best way to design a div that showcases text on top of a background image, complete with a pointer or arrow, and automatically adjusts its width to properly display the

Styling pagination for jquery dataTable

Guide on transferring PHP database information to JQuery and then adding it to a Table

Firefox consistently reports ajax status as error

The Bootstrap tab feature is malfunctioning when a tab is using data-target instead of href

Leveraging jQuery's element objects and the :contains selector allows for powerful

What is the method for altering the color of the webkit-slider-thumb using JavaScript?

Background image color not displaying correctly

Beginner Assistance: Extracting information from a file and integrating it into an established array