Как сохранить «активный» класс в теге li при перенаправлении на другую страницу?
У меня есть 2 меню для управления категориями и управления продуктом, оно становится «активным» при нажатии. Проблема в том, что есть кнопка «Добавить продукт» в меню «Управление продуктом». Когда я иду на страницу добавления продукта, меню «Управление продуктом» не остается «активным».
<aside class="main-sidebar">
<section class="sidebar">
<ul class="sidebar-menu">
<li>
<a href="manage_category.php">
<i class="fa fa-table"></i> <span>Manage category</span>
</a>
</li>
<li>
<a href="manage_products.php">
<i class="fa fa-table"></i> <span>Manage products</span>
</a>
</li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<script type="text/javascript">
$(document).ready(function() {
var url = window.location;
// for sidebar menu entirely but not cover treeview
$('ul.sidebar-menu a').filter(function() {
return this.href == url;
}).parent().addClass('active');
});
</script>
Решение
Вы можете добавить скрытую ссылку для «добавления продукта» в вашем меню
<li>
<a href="manage_products.php">
<i class="fa fa-table"></i> <span>Manage products</span>
</a>
<a href="add_product.php" style="display:none"></a>
</li>
и ваш код JavaScript должен работать как это
Другие решения
Ваше window.location возвращает весь URL, а не только страницу.
Это работает:
$(document).ready(function() {
var url = location.pathname.split('/').slice(-1)[0];
jQuery('ul.sidebar-menu a').each(function() {
if($(this).attr('href') == url)
$(this).parent().addClass('active');
});
});
Я подозреваю, что url (window.location)! = This.href в вашем фильтре.
this.href будет, например, manage_products.php, но window.location — это объект. (Проверьте документы MDN для window.location). https://developer.mozilla.org/en-US/docs/Web/API/Location
Даже window.location.href все равно даст вам полный URL. Но —
window.location.pathname может быть близко к тому, что вы хотите.
Если вы отлаживаете свой код в этой строке: return this.href == url; и изучить значения вы увидите свою проблему.
Если «добавить продукт» не отличается от другой страницы, попробуйте код ниже.
var parameter = Sys.WebForms.PageRequestManager.getInstance();
parameter.add_endRequest(function () {
var url = window.location;
// for sidebar menu entirely but not cover treeview
$('ul.sidebar-menu a').filter(function() {
return this.href == url;
}).parent().addClass('active');
})