динамический HTML-меню JavaScript активный выбор

Question

динамический HTML-меню JavaScript активный выбор

0

Я нашел этот скрипт, и я понимаю, почему он не будет работать с моим меню, как есть, но не может понять, как заставить его работать

<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>

Любая помощь будет оценена по достоинству. Благодарю.

user3080228 17 дек. 2013, в 14:59

Источник

Теги:

javascript

html

menu

html-lists

3 ответа

1

Вы выбираете 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');
});

jazZRo 17 дек. 2013, в 11:52

0

Учитывая, что первый li всегда имеет current класс ... хм, приятно.
Biketire 17 дек. 2013, в 14:22
0

@Gerard: он удаляет текущий класс из всех li и затем сужает выбор до того, у которого есть тег с нужным href, который затем получает текущий класс.
jazZRo 17 дек. 2013, в 14:25
0

Я понимаю. Не знал о существовании функции has в jQuery.
Biketire 17 дек. 2013, в 14:26

Показать ещё 1 комментарий

0

Похоже, вы хотите, чтобы класс находился на <li> не на элементах <a>? Вы добавляете его к самим якорям. Пытаться:

$("ul.menu li").removeClass('current');
$("ul.menu li a[href^='"+currentPHP+"']").parent().addClass('current');

(Вы также выбрали id not class, как отметил jazZRo - отредактирован для использования класса)

drquicksilver 17 дек. 2013, в 11:36

Ещё вопросы

Учитывая, что первый li всегда имеет current класс ... хм, приятно.
@Gerard: он удаляет текущий класс из всех li и затем сужает выбор до того, у которого есть тег с нужным href, который затем получает текущий класс.
Я понимаю. Не знал о существовании функции has в jQuery.

Biketire · Accepted Answer · 2013-12-17T13-00-00.000Z

Мое решение

$(document).ready(function(){
  var currentPHP = document.location.pathname.replace(/.+\//i, "")
  $("ul.menu li a[href^='"+currentPHP+"']").parent().addClass("current");
});