Jquery adding active element function not working anymore?

Question

I have this function which adds an active element to my header to show which page you are on, the website is built on wordpress and I have queried all my .js files properly and there are no errors in the console, I cant figure why it wont work.

Here is the function

$(".main-menu-list li, .mob-menu-list a").on("click", function (e) {
    let page = $(this).attr("href");
     if ($(this).hasClass("active-page")) {
        return false;
     }
     $(".page").fadeOut(400);
     $("." + page).fadeIn(400);
     $(".main-menu-list li, .mob-menu-list a").removeClass("active-page");
     $(this).addClass("active-page");
   return false;
 });

And here is the html code for the menu

<nav class="main-menu">
<ul id="menu-topmenu" class="main-menu-list">
    <li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-5 current_page_item menu-item-54"><a href="http://tilts.webserveris.lv/lv/" aria-current="page">Sākums</a></li>

        <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="http://tilts.webserveris.lv/lv/about-us/">Par mums</a></li>

        <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a href="http://tilts.webserveris.lv/lv/projects/">Projekti</a></li>

        <li id="menu-item-48" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48"><a href="http://tilts.webserveris.lv/lv/news/">Jaunumi</a></li>

        <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="http://tilts.webserveris.lv/lv/partners/">Partneri</a></li>

        <li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-51"><a href="http://tilts.webserveris.lv/lv/contacts/">Kontakti</a></li>
        </ul>   
</nav>
     

The css is just fine no problems there, this was working before but I cant see where i messed this up

Answer 1

I've tested your code and it seems to work (as below)

 $(".main-menu-list li, .mob-menu-list a").on("click", function (e) { let page = $(this).attr("href"); if ($(this).hasClass("active-page")) { return false; } $(".page").fadeOut(400); $("." + page).fadeIn(400); $(".main-menu-list li, .mob-menu-list a").removeClass("active-page"); $(this).addClass("active-page"); return false; });

 .active-page { background: #000; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav class="main-menu"> <ul id="menu-topmenu" class="main-menu-list"> <li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-5 current_page_item menu-item-54"><a href="http://tilts.webserveris.lv/lv/" aria-current="page">Sākums</a></li> <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="http://tilts.webserveris.lv/lv/about-us/">Par mums</a></li> <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a href="http://tilts.webserveris.lv/lv/projects/">Projekti</a></li> <li id="menu-item-48" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48"><a href="http://tilts.webserveris.lv/lv/news/">Jaunumi</a></li> <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="http://tilts.webserveris.lv/lv/partners/">Partneri</a></li> <li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-51"><a href="http://tilts.webserveris.lv/lv/contacts/">Kontakti</a></li> </ul> </nav>

WordPress occasional has JS conflicts so best to wrap in

(function($) {
    
// ADD JS HERE
    
})( jQuery );

Which basically tells WP to see the $ as jQuery, so your new code would be:

(function($) {
    
$(".main-menu-list li, .mob-menu-list a").on("click", function (e) {
    let page = $(this).attr("href");
     if ($(this).hasClass("active-page")) {
        return false;
     }
     $(".page").fadeOut(400);
     $("." + page).fadeIn(400);
     $(".main-menu-list li, .mob-menu-list a").removeClass("active-page");
     $(this).addClass("active-page");
   return false;
 });
    
})( jQuery );

Answer 2

I finally find what was the problem I had to wrap my document in

jQuery(document).ready(function($) {

code here 

});