Bootstrap 4 – 在nav-link上删除活动类
我正在使用具有活动类的nav-item创建Bootstrap 4 navbar 。 我的问题是当我使用active类时，我无法从nav-item删除它
如何删除nav-item上的活动类？
这是我的HTML：
这是我的CSS：
.menu-large {position: static !important;} .megamenu { padding: 20px 20px; width: 100%; -webkit-box-shadow: none; box-shadow: none; } .megamenu > div > li > ul { padding: 0; margin: 0; } .megamenu > div > li > ul > li { list-style: none; } .megamenu > div > li > ul > li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.428571429; color: #333333; white-space: normal; } .megamenu > div > li > ul > li > a:hover, .megamenu > div > li > ul > li > a:focus { text-decoration: none; color: #262626; background: none; /*background-color: #f5f5f5;*/ } .megamenu .dropdown-header { color: #428bca; font-size: 18px; padding: 3px 20px; font-weight: bold; } .navbar-light .navbar-nav .active>.nav-link{ color:red!important; }
这是我的JS：
$(document).ready(function() { $('.navbar-nav .nav-item').click(function(e) { $('.navbar-nav .nav-item').removeClass('active'); var $this = $(this); if(!$this.hasClass('active')){ $this.addClass('active'); } e.preventDefault(); }); });
JSFiddle Link，你可以在其中看到JSFiddle示例
你能帮我解决一下这个问题吗？