Switching up the menu choices does not result in a shift in the active class, despite attempting the workaround outlined in the following link

Question

Switching up the menu choices does not result in a shift in the active class, despite attempting the workaround outlined in the following link

Currently, I am working on a website which can be accessed at the following link: . You can find a helpful example link below.

How to change active class while click to another link in bootstrap use jquery?

Now, I will showcase the code that I have written and where you can locate it in the JS file.

HTML: The code snippet provided begins on line 77 when you open the DEBUG console or scroll down to the <nav> tag.

           
            <!-- HTML code goes here -->

JS: You can find the relevant Javascript code starting from line 194 or by scrolling until you reach this specific code.

        
        // Javascript code goes here

Let me walk you through some issues that I am currently facing:

FIRST: Upon clicking on the "Learn more..." button of the first slide, the page should smoothly scroll down to the GET A QUOTE section where the yellow bar with the text "GET A QUOTE" appears. However, this functionality is not working as expected.

SECOND: If you navigate from the base URL and scroll until the menu becomes visible, you will notice that the HOME menu item is highlighted as active. But, upon clicking on other menu items like About, the active highlight does not switch accordingly.

THIRD: When scrolling from the base URL to the section labeled "Roofing Services We Offer," you will see that SPRAY FOAM ROOFING is already marked as active. However, clicking on any other menu item does not trigger the corresponding active status for the specified content unless clicked directly.

If you view the screenshots linked below, you can observe the discrepancies that occur:

https://i.sstatic.net/zoGEC.png

In summary, I suspect that the issue lies in how the ACTIVE class is handled, potentially removing all active classes from every element whenever the addEventListener() function is executed.

Any assistance in resolving these issues would be greatly appreciated. Thank you for your support.

javascript html jquery css twitter-bootstrap

Answer 1

Answer №1

When handling clicks on the <a> elements, make sure to add or remove the .active class from the parent <li> element instead of the <a> element:

$('#ftco-nav .navbar-nav li a').click((e) => {
  $('#ftco-nav .active').removeClass('active');
  $(e).parent().addClass('active');
  // ...
}

The scroll handler also needs adjustment. Remember to toggle the .active class on the

<li class="nav-item">

elements rather than the <a> elements:

if ($(this).position().top <= distance + 250) {
  $('#ftco-nav .navbar-nav .nav-item.active').removeClass('active');
  $('#ftco-nav .navbar-nav a').eq(i).parent().addClass('active');
}

Answer 2

When handling clicks on the <a> elements, make sure to add or remove the .active class from the parent <li> element instead of the <a> element:

$('#ftco-nav .navbar-nav li a').click((e) => {
  $('#ftco-nav .active').removeClass('active');
  $(e).parent().addClass('active');
  // ...
}

The scroll handler also needs adjustment. Remember to toggle the .active class on the

<li class="nav-item">

elements rather than the <a> elements:

if ($(this).position().top <= distance + 250) {
  $('#ftco-nav .navbar-nav .nav-item.active').removeClass('active');
  $('#ftco-nav .navbar-nav a').eq(i).parent().addClass('active');
}

Switching up the menu choices does not result in a shift in the active class, despite attempting the workaround outlined in the following link

Answer №1

Similar questions

Update the text box with the value of the checkbox selected before

CSRF token validation failed during the AJAX request

From where does useTranslate fetch the translations?

Troubleshooting the malfunctioning AngularJS ui-view component

Material-UI: Creating Radio Button Groups

Transforming a function into its string representation | 'function(){...}'

Exploring the Window.prompt() method in JavaScript

What could be the reason for the image not showing up on react?

Add the file retrieved from Firestore to an array using JavaScript

Combining AngularJS with ng file upload and Sails JS for seamless file uploading

Using Redux with Next.js to implement getStaticPaths

Using OpenCV.js to detect QR codes

Plugin using jQuery that adds a UserVoice-inspired feedback tab to any webpage

Following the completion of every asynchronous operation, a callback will be executed

Adding a button in Node and Mongoose for updating data: A step-by-step guide

Webpack and Keycloak Integration: Content blocked because of MIME type ("text/html")

"Creating a Two-Column Layout with ASP.NET Core and Bootstrap through POST

Troubleshooting jQuery's issue with dynamically adding input fields

Execute SQL Server stored procedure passing a collection of dates to disable on a jQuery datepicker

Choosing based on conditions within a function