如何使用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');