首页 > 解决方案 > 使用javascript动态添加活动到菜单

问题描述

我正在尝试使用 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 正确地做到这一点。

标签: javascriptphphtmljquery

解决方案


您有带有pathname的正斜杠,因此您必须将其删除。

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

推荐阅读