使用 javascript 將活動動態添加到菜單

Question

我正在嘗試使用 JavaScript 動態地將活動添加到菜單，但是我做錯了，所以它沒有發生。

我的菜單 html 代碼是這樣的

<aside class="sidenav-main nav-expanded nav-lock nav-collapsible sidenav-light navbar-full sidenav-active-rounded">
        <div class="brand-sidebar">
          <h1 class="logo-wrapper"><a class="brand-logo darken-1" href="index.html"><img src="../app-assets/images/logo/materialize-logo.png" alt="materialize logo"/><span class="logo-text hide-on-med-and-down">SAMIL</span></a><a class="navbar-toggler" href="#"><i class="material-icons">radio_button_checked</i></a></h1>
        </div>
        <ul class="sidenav sidenav-collapsible leftside-navigation collapsible sidenav-fixed menu-shadow" id="slide-out" data-menu="menu-navigation" data-collapsible="menu-accordion">
          <li class="bold"><a class="collapsible-header waves-effect waves-cyan " href="JavaScript:void(0)"><i class="material-icons">settings_input_svideo</i><span class="menu-title" data-i18n="Dashboard">Dashboard</span></a>
            <div class="collapsible-body">
              <ul class="collapsible collapsible-sub" data-collapsible="accordion">
                <li><a href="dashboard.php"><i class="material-icons">radio_button_unchecked</i><span data-i18n="Analytics">Dashboard</span></a>
                </li>
                <li><a href="searchDashboard.php"><i class="material-icons">radio_button_unchecked</i><span data-i18n="Analytics">Search Dashboard</span></a>
                </li>
                <li><a href="userDashboard.php"><i class="material-icons">radio_button_unchecked</i><span data-i18n="Analytics">User Dashboard</span></a>
                </li>
                <li><a href="hitDashboard.php"><i class="material-icons">radio_button_unchecked</i><span data-i18n="Analytics">Hit Dashboard</span></a>
                </li>
              </ul>
            </div>
          </li>
          <li class="navigation-header"><a class="navigation-header-text">Users </a><i class="navigation-header-icon material-icons">more_horiz</i>
          </li>
          <li class="active bold"><a class="collapsible-header waves-effect waves-cyan " href="JavaScript:void(0)"><i class="material-icons">face</i><span class="menu-title" data-i18n="User">User</span><span class="badge badge pill purple float-right mr-10">3</span></a>
            <div class="collapsible-body">
              <ul class="collapsible collapsible-sub" data-collapsible="accordion">
                <li class="active"><a class="active" href="clientList.php"><i class="material-icons">radio_button_unchecked</i><span data-i18n="List">Client List</span></a>
                </li>
                <li><a href="userList.php"><i class="material-icons">radio_button_unchecked</i><span data-i18n="View">User List</span></a>
                </li>
              </ul>
            </div>
          </li>
          <li class="navigation-header"><a class="navigation-header-text">Prediction </a><i class="navigation-header-icon material-icons">more_horiz</i>
          </li>
          <li class="bold"><a class="collapsible-header waves-effect waves-cyan " href="JavaScript:void(0)"><i class="material-icons">content_paste</i><span class="menu-title" data-i18n="Pages">Prediction</span></a>
            <div class="collapsible-body">
              <ul class="collapsible collapsible-sub" data-collapsible="accordion">
                <li><a href="predictPrice.php"><i class="material-icons">radio_button_unchecked</i><span data-i18n="Contact">Price Prediction</span></a>
                </li>
                <li><a href="vDataCount.php"><i class="material-icons">radio_button_unchecked</i><span data-i18n="View">Top Buyer</span></a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
        <div class="navigation-background"></div><a class="sidenav-trigger btn-sidenav-toggle btn-floating btn-medium waves-effect waves-light hide-on-large-only" href="#" data-target="slide-out"><i class="material-icons">menu</i></a>
      </aside>

當頁面處於活動狀態時，我必須在 ul 下添加活動，就像下面的代碼一樣。

<li class="active"><a href="dashboard.php"><i class="material-icons">radio_button_unchecked</i><span data-i18n="Analytics">Dashboard</span></a>

我正在嘗試使用 JavaScript 但沒有成功。 可以幫助我如何使用 JavaScript 或 jQuery 正確地做到這一點。

Answer 1

您有帶有pathname的正斜杠，因此您必須將其刪除。

<script>
var pathname = window.location.pathname; 
var pathname = pathname.substring(pathname.lastIndexOf('/') + 1);
$('.collapsible > li > a[href="'+pathname+'"]').parent().addClass('active');
</script>