如何使主菜单中的滚动链接仅在单击时处于活动状态？

【问题标题】：How to make the scrolling link in main menu to be active on click only?如何使主菜单中的滚动链接仅在单击时处于活动状态？
【发布时间】：2020-09-03 05:10:13
【问题描述】：

我正在使用“The7”主题通过 wordpress 建立一个网站。

在主菜单中，我有三个链接到主页部分的锚链接，我有一个问题，这些链接有“活动”类（（我认为这是因为主题））

Here is an image of the problem

我需要这些链接在点击时才有效

我尝试在标题中插入一个 js 脚本以避免这些链接具有“活动”类

$(function() {
      var $navLIs = $('header.header-bar ul li a')
      $navLIs.click(function() {
        $navLIs.removeClass('active');
        $(this).addClass('active');
      });
    });

【问题讨论】：

标签： javascript html css wordpress

【解决方案1】：

我假设您在标题（html 内容）加载后插入脚本。

如果是这样，您可以尝试以下方法：

<html>
   <head>
       <!-- styles, meta tags, title, etc -->
   <head>
   <body>
       <header class='header'>
           <ul>
               <li>
                   <a class='active item-one'>item one</a>
               </li>
               <li>
                   <a class='active item-one'>item one</a>
               </li>
               <li>
                   <a class='active item-one'>item one</a>
               </li>
           </ul>
       </header>
       <!-- rest of your html -->
       <script>
           (function() {
               function removeActiveClassFromMenuItems() {
                   const activeItems = document.querySelectorAll('.active');
                   activeItems.forEach(item => {
                       item.classList.remove('active');
                   });
                }
                removeActiveClassFromMenuItems(); //Removes active class
            })();
       </script>
   </body>
</html>

【讨论】：