Элемент навигационной панели Bootstrap активен в зависимости от имени файла?
В настоящее время я создаю свой веб-сайт с использованием фреймворка начальной загрузки, у меня есть небольшая проблема в том, что для пункта меню, который я хотел бы активировать, в зависимости от имени файла с использованием оператора if.
Например, если имя файла «о», вкладка «о» будет активной.
<li class = "nav-item active">
<a class = "nav-link" href = "about.php">About <span class = "sr-only">(current)</span></a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Link</a>
</li>
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
alert(filename);
Если кто-то может предложить помощь, я был бы очень признателен, я безуспешно работал над этим последние 3 часа.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Вы уже успешно извлекаете имя файла из URL-адреса. При этом вы можете использовать селектор jQuery, чтобы добавить класс активный к соответствующей ссылке.
Предположение: вы используете jQuery, так как в настоящее время это требование для компонентов Bootstrap.
Пример:
<script>
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
$('a[href* = "' + filename + '"]').addClass('active');
</script>
Спасибо за ответ, я пытался заставить ваше предложение работать, но мне это не удалось, если у вас есть свободная минутка, не могли бы вы быстро проверить pastebin, пожалуйста, pastebin.com/KA33TkeJ
просто чтобы уточнить, приведенный выше источник находится в файле с именем about.html
@coding_with_tea две проблемы: 1) Line25 для этого решения имя файла должно отображаться в атрибуте href тега a. 2) Ваш скрипт нужно ставить после загрузки jQuery. См. этот исправленный pastebin (сохраните его как about.html) для сравнения. pastebin.com/4nvNsXDc
Большое спасибо! это прекрасно, я действительно ценю это!
Вы можете проверить все меню панели навигации, чтобы найти соответствие. Вот пример
$('.navbar ul li a').each(function(){
var $this = $(this);
// if the current path is like this link, make it active
if ($this.attr('href').indexOf(filename) !== -1){
$this.parents('li').addClass('active');
return false;
}
})
Где «имя файла» — это ваше фактическое текущее имя файла.
$('.nav-link').removeClass("active");
$('#' + filename).addClass("active");
используйте этот код внутри тега script и убедитесь, что вы добавили идентификатор к каждому li, эквивалентному имени файла.
Дайте мне знать, если вы столкнетесь с какой-либо другой проблемой.
Спасибо за ответ, я попробовал ваш пример, но, похоже, он у меня не работает, я разместил код на pastebin, если вы могли бы быстро взглянуть на меня, пожалуйста, спасибо pastebin.com/Uv4jqNYd
Согласно вашему html-коду, вам нужно добавить класс active в родитель тега a. Итак, попробуйте этот код
$('.nav-item').removeClass('active'); //Remove active class from elements
$('a[href* = "' + filename + '"]').parent().addClass("active"); // add active class
это динамический способ с родным javascript
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
var file = filename.split(".");
var TagItems = document.getElementsByClassName("nav-item");
for(navitem of TagItems)
{
for(item of navitem.children)
{
var targetFile = item.getAttribute("href").split(".");
if (targetFile[0] == file[0])
navitem.classList.add("active");
else
navitem.classList.remove("active");
}
}
Привет, я попробовал ваш код, но он не работает, pastebin.com/Qk6b95hZ, если бы вы могли быстро взглянуть, я был бы признателен, спасибо.
я думаю, что это не работает, потому что вы используете php .. вы можете проверить это в моем коде codepen.io/aziada/pen/BEgaEV
Я бы посоветовал вам изучить, как работают теги <a>, похоже, это решит вашу проблему. html.com/tags/а