Я нашел этот скрипт, и я понимаю, почему он не будет работать с моим меню, как есть, но не может понять, как заставить его работать
<script>
$(document).ready(function(){
var i = document.location.href.lastIndexOf("/");
var currentPHP = document.location.href.substr(i+1);
$("ul#menu li a").removeClass('current');
$("ul#menu li a[href^='"+currentPHP+"']").addClass('current');
});
</script>
<nav>
<ul class="menu">
<li class="current"><a href="index.php">Home</a></li>
<li><a href="gallery.php">Gallery</a></li>
<li><a href="location.php">Location</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
Любая помощь будет оценена по достоинству. Благодарю.
Мое решение
$(document).ready(function(){
var currentPHP = document.location.pathname.replace(/.+\//i, "")
$("ul.menu li a[href^='"+currentPHP+"']").parent().addClass("current");
});
Вы выбираете ul по своему id: ul#menu
. Выберите его по названию класса: ul.menu
. Вы также добавляете и удаляете текущий класс из a, а не li. Попробуй это:
$(document).ready(function(){
var i = document.location.href.lastIndexOf("/");
var currentPHP = document.location.href.substr(i+1);
$("ul.menu li")
.removeClass('current')
.has("a[href^='"+currentPHP+"']")
.addClass('current');
});
li
всегда имеет current
класс ... хм, приятно.
Похоже, вы хотите, чтобы класс находился на <li>
не на элементах <a>
? Вы добавляете его к самим якорям. Пытаться:
$("ul.menu li").removeClass('current');
$("ul.menu li a[href^='"+currentPHP+"']").parent().addClass('current');
(Вы также выбрали id not class, как отметил jazZRo - отредактирован для использования класса)