У меня есть следующий файл включения, который создает меню для моих html-страниц:
function menu(){
document.write("<nav>");
document.write('<ul class="nav nav-pills pull-right dynamic-highlight">');
document.write('<li role="presentation"><a href="index.html">List Widgets</a></li>');
document.write('<li role="presentation"><a href="create_widget.html">Create Widget</a></li>');
document.write('<li role="presentation"><a href="create_group.html">Create Widget Group</a></li>')
document.write('<li role="presentation"><a href="department_widget_list.html">Department Widget List</a></li>')
document.write('<li role="presentation"><a href="group_membership_list.html">Group Members List</a></li>')
document.write('<li role="presentation"><a href="site_conf.html">Site Configuration</a></li>')
document.write('</ul>')
document.write('</nav>')
}
Каждая страница, которая включает это меню, имеет следующий код:
<head>
... stuff....
<script type="text/javascript" src="menu_html.js"></script>
</head>
<body>
<div class="container"><br>
<div class="header clearfix">
<script type="text/javascript">
menu();
</script>
У меня естьдобавил следующий javascript, чтобы попытаться найти все "
" под "", о котором идет речь, и затем сопоставить имя href с текущей страницей.Цель состоит в том, чтобы добавить значение «активный» к имени класса.Но это не работает. Вот javascript:
$(document).ready(function() {
var loc = window.location.pathname;
loc = loc.substring(1);
console.log(loc);
$('.dynamic-highlight').find('a').each(function() {
console.log($(this).attr('href'))
$(this).addClass('active', $(this).attr('href') == loc);
//$(this).addClass("active");
});
Используя вывод консоли, я вижу, что имя страницы текущего местоположения соответствует элементам, возвращаемым методом find.Но addClass, похоже, не работает, потому что я не получаю выделенный пункт меню.Я также попробовал .toggleClass вместо addClass.
РЕДАКТИРОВАТЬ 1
Я не получаю никаких ошибок, но подсветка не появляется.Поэтому я попытался открыть окно F12 и, используя DOM Explorer, попытался выбрать «
», который сейчас выбран.На нем не установлено class = "active".
Просто чтобы убедиться, что "active" - это тот класс, который мне нужен, я жестко закодировал / изменил свое включение, чтобы оно выглядело так:
document.write('<li role="presentation" class="active"><a href="index.html">List Widgets</a></li>');
и обновите мою страницу.И я вижу выделенный пункт меню «Список виджетов».
Не уверен, что еще попробовать ...