This is an extension of this question which is fixed Changing Menu items, when going to a specific section of the site, is off by one section and I don't know why but, now that the menu system is working great, the problem now that exists is when I click on any other item with an anchor, it doesn't change. Specifically, when you scroll to the section: We've been in Serving our Community for nearly 50 years! and Roofing Services We Offer.
Here's the test site again to reduce having to look for it in the previous question. http://wtr2022.webparity.net/index.html
The TAB sections change the picture, for Roofing Services We Offer, but the tabs don't change nor does the items become ACTIVE.
On the section: We've been in Serving our Community for nearly 50 years! The tabs for Mission, Vision and Value appear as the anchor in the URL but they don't change.
Something's messed up and I believe it's here:
$('#ftco-nav .navbar-nav li a').click((e) => {
$('#ftco-nav .active').removeClass('active');
$(e).parent().addClass('active');
console.log("Argument for CLICK FUNCTION: ", e.currentTarget.innerHTML);
// console.log("CURRENT TARGET for CLICK FUNCTION: ", e.currentTarget.parentElement);
if (e.currentTarget.innerHTML === "Services") {
funcs.changeAboutImage('sprayfoam');
}
});
/* Code for changing active link on clicking */
let btns = $("#ftco-nav .navbar-nav .nav-link");
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", () => {
let current = document.getElementsByClassName("active");
// console.log("CURRENT: ", current);
});
}
/* Code for changing active
link on Scrolling */
$(window).scroll(() => {
let distance = $(window).scrollTop();
// console.log($(window).scrollTop());
if ($(window).scrollTop() > 701) {
$('#ftco-navbar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 700) {
$('#ftco-navbar').removeClass('navbar-fixed');
}
$('.ftco-section').each(function (i) {
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');
}
});
}).scroll();
The above code appears in js/wtr-custom.js
Now the menu is working with scrolling and whenever you click on the other anchors, I believe this is what's causing or is a contributor to the issue.
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", () => {
let current = document.getElementsByClassName("active");
// console.log("CURRENT: ", current);
});
}
I don't want to change anything but, I believe that I need to also TARGET the other CLASS NAMES or IDs in the code above this one. Please confirm.
