提问者:小点点

Jquery添加活动元素函数不再工作了?


我有这个功能,它添加了一个active元素到我的头显示你在哪个页面上,这个网站是建立在wordpress上的,我已经正确地查询了我所有的.js文件,在控制台中没有错误,我不知道为什么它不能工作。

下面是函数

$(".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;
 });

这是菜单的html代码

<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>
     

css只是很好没有问题,这是工作之前,但我看不到哪里我搞砸了这个


共1个答案

匿名用户

我已经测试了你的代码,它似乎可以工作(如下所示)

null

$(".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>