javascript - 使用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 正确地做到这一点。
解决方案
您有带有pathname的正斜杠,因此您必须将其删除。
<script>
var pathname = window.location.pathname;
var pathname = pathname.substring(pathname.lastIndexOf('/') + 1);
$('.collapsible > li > a[href="'+pathname+'"]').parent().addClass('active');
</script>
推荐阅读
- mongodb - 当没有匹配的文档时,为什么 MongoDB update() 比 find() 慢,这可以更改吗?
- ios - 在iOS中长按键盘上的键时发出警告
- bootstrap-4 - 如何解决 Bootstrap Tour 的“getTipElement() 不是函数”错误?
- c# - 当最终用户添加选择条件时如何在 Windows 窗体中更新 DataGridView
- python - django 中的追随者系统“bool 不可调用”
- docker - 从容器挂载主机文件时如何自动创建文件而不是目录
- c - OS X 上未定义的符号“_clone”
- node.js - 如何在 Firebase 的计划任务中执行 NumChildren()?
- r - 我无法正确格式化所需的输出
- php - 当我在 Symfony + VichUploaderBundle 中检索实体时如何获取图像 URL?