如何使用javascript动态更改导航栏中的活动类

Question

当用户单击<li>标记时，我试图将导航栏设置为在当前页面中将类动态更改为“活动”。 我哪里做错了？

 dynamicNavbar(); function dynamicNavbar() { $('.nav_w3ls .menu a').on('click', function() { $('.nav_w3ls .menu').find('a.active').removeClass('active'); $(this).parent('a').addClass('active'); }); }

 <div class="nav_w3ls ml-lg-5"> <nav> <label for="drop" class="toggle">Menu</label> <input type="checkbox" id="drop" /> <ul class="menu"> <li><a href="index.php" class="active">Home</a></li> <li><a href="about.php">About</a></li> <li><a href="why_us.php">Why Us</a></li> <li><a href="pricing.php">Pricing</a></li> <li><a href="contact.php">Contact</a></li> <li class="nav-right-sty mt-lg-0 mt-sm-4 mt-3"> <a href="pages/login.php" class="reqe-button text-uppercase">Login</a> <a href="pages/register.php" class="reqe-button text-uppercase">Register</a> </li> </ul> </nav> </div>

我希望导航栏在当前页面上处于活动状态

Answer 1

首先，您需要获取页面名称。 然后将该类添加到具有此页面名称作为href属性的a元素。

$(document).ready(function() {
    $('.nav_w3ls .menu').find('a.active').removeClass('active');

    var sPath = window.location.pathname;
    var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
    $('.nav_w3ls .menu').find('a[href=' + sPage + ']').addClass('active');
});

Answer 2

 dynamicNavbar(); function dynamicNavbar() { $('.nav_w3ls .menu a').on('click', function() { $('.nav_w3ls .menu').find('a.active').removeClass('active'); $(this).addClass('active'); }); }

 <div class="nav_w3ls ml-lg-5"> <nav> <label for="drop" class="toggle">Menu</label> <input type="checkbox" id="drop" /> <ul class="menu"> <li><a href="index.php" class="active">Home</a></li> <li><a href="about.php">About</a></li> <li><a href="why_us.php">Why Us</a></li> <li><a href="pricing.php">Pricing</a></li> <li><a href="contact.php">Contact</a></li> <li class="nav-right-sty mt-lg-0 mt-sm-4 mt-3"> <a href="pages/login.php" class="reqe-button text-uppercase">Login</a> <a href="pages/register.php" class="reqe-button text-uppercase">Register</a> </li> </ul> </nav> </div>

你的代码工作得很好，唯一的问题是在最后一行。 您不必在“this”上调用“父方法”。
$(this).addClass('active');