将“活动”类附加到 li答案

【问题标题】：Appending 'active' class to li将“活动”类附加到 li
【发布时间】：2023-03-31 12:13:02
【问题描述】：

我花了好几个小时试图让它工作，也花了好几个小时阅读这些论坛并尝试不同的代码。我需要一点帮助。

我正在尝试将“活动”类附加到我的主菜单 li。该代码确实将活动类添加到 li 但一旦发生我就无法单击它。

这是我尝试过的；

$('.nav li').click(function(e) {
    e.preventDefault(); //prevent the link from being followed
    $('.nav li').removeClass('active');
    $(this).addClass('active');
});

如果我删除 e.preventDefault();活动类仍然会在不到一秒钟的时间内追加到无。

主菜单

<div class="collapse navbar-collapse mega-menu navbar-responsive-collapse">
        <div class="container">
            <ul class="nav navbar-nav">
                <!-- Home -->
                <li class="nav active">
                    <a href="index.php" class="dropdown-toggle">
                    <i class="fa fa-home"></i>  Home
                    </a>
                </li>
                <!-- End Home -->

                <!-- Features -->
                <li class="nav">
                    <a href="features.html" class="dropdown-toggle">
                    <i class="fa fa-list"></i>  Features
                    </a>
                </li>                    
                <!-- End How It Works -->

                <!-- Features -->
                <li class="nav">
                    <a href="howitworks.html" class="dropdown-toggle">
                    <i class="fa fa-compass"></i>  How It Works
                    </a>
                </li>                    
                <!-- End How It Works -->

                <!-- Pricing -->
                <li class="nav">
                    <a href="pricing.html" class="dropdown-toggle">
                    <i class="fa fa-credit-card"></i>  Pricing
                    </a>
                </li>
                <!-- End Pricing -->

                <!-- Help Articles -->
                <li class="dropdown">
                    <a href="help_center.html" class="dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fa-life-ring"></i>  Help
                    </a>
                     <ul class="dropdown-menu">
                        <li>
                            <div class="mega-menu-content disable-icons">
                                <div class="container">
                                    <div class="row equal-height">
                                        <div class="col-md-3 equal-height-in">
                                            <ul class="list-unstyled equal-height-list">
                                                <li><h3> Top 7 Help Articles</h3></li>

                                                <!-- Help Articles -->
                                                <li><a href="Help Article.html"><i class="fa fa-sort-alpha-asc"></i> Help Article</a></li>
                                                <li><a href="Help Article.html"><i class="fa fa-magic"></i> Help Article</a></li>
                                                <li><a href="Help Article.html"><i class="fa fa-ellipsis-h"></i> Help Article</a></li>
                                                <li><a href="Help Article.html"><i class="fa fa-quote-left"></i> Help Article</a></li>
                                                <li><a href="Help Article.html"><i class="fa fa-asterisk"></i> Help Articles</a></li>
                                                <li><a href="Help Article.html"><i class="fa fa-comments"></i> Help Article</a></li>
                                                <li><a href="Help Article.html"><i class="fa fa-tasks"></i> Help Article</a></li>
                                                <!-- End Help Articles -->
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </ul>
                </li>

                <!-- End Help Articles -->

                <!-- Contact Us -->
                <li class="nav">
                    <a href="contactus.html" class="dropdown-toggle">
                    <i class="fa fa-envelope-o"></i>  Contact Us
                    </a>

                </li>                    
                <!-- Contact Us -->

            </ul>
        </div><!--/end container-->
    </div><!--/navbar-collapse-->
</div>

【问题讨论】：

点击<li>没有默认动作，所以不需要阻止默认。问题是你点击了<li>中的链接，所以你点击了那个链接。
@Nick，打开/加载新页面时无法保存活动状态，您需要为每个页面分别设置活动链接...您可以通过活动类的硬编码来做到这一点，当然还有更简单的方法......我想这实际上是你的问题？

标签： jquery class append

【解决方案1】：

将处理程序绑定到<a>，而不是<li>。

$(".nav li a").click(function(e) {
    e.preventDefault();
    $(".nav li.active").removeClass("active");
    $(this).closest("li").addClass("active");
});

【讨论】：

不起作用，将“活动”附加到 li，但同样的事情，它突出显示但无法单击它
不能点击是什么意思？除了添加活动类之外，单击它时应该发生什么？
这是我的网站主菜单，例如，我有一个功能菜单项，可将用户带到tpntest.net.au/features.html。我试图通过将“活动”类附加到 li 或 a 来让菜单突出显示活动页面
这对我没有帮助。您还没有发布任何显示点击应该做什么的代码，那么我怎么知道它为什么不这样做呢？
你想让它跟随<a>中的链接吗？如果这样做，页面将重新加载，所以这里的 Javascript 都不相关。

【解决方案2】：

这里有一个用于活动类的 javascript 选项 - codepen

//vanilla js -- toggle active class 
// el = object containing the elements to toggle active class and the parent    element 
var el = {
   one: document.getElementById('one'),
   two: document.getElementById('two'),
   three: document.getElementById('three'),
   hold: document.getElementById('hold')
};
// func = object containing the logic 
   var func = {
      toggleActive: function(ele) {
      ele = event.target;
      var hold = el.hold.children;
      var huh = el.hold.children.length;
      var hasActive = ele.classList.contains('active');
      for (i = 0; i < huh; i++) {
          if (hold[i].classList.contains('active')) {
          hold[i].classList.remove('active');
      }
    }
    if (!hasActive) {
       ele.classList.add('active');
    }
  }
};

  //add listeners when the window loads 
  window.onload = function() {
     var holdLen = el.hold.children.length; //add listener to all elements inside #hold
     for(i=0;i<holdLen;i++){
         el.hold.children[i].addEventListener("click", func.toggleActive);
      }
  }

【讨论】：