Подсветка текущей страницы jQuery

Question

Как я могу использовать jQuery, чтобы выделить текущую страницу?Другими словами, добавьте «текущий» класс к элементу текущей страницы.

Вот мой код:

    <div id="nav">
        <ul>
            <li><a href="../articles/">Articles</a></li>
            <li><a href="../photos/">Photos</a></li>
            <li><a href="../info/">Earthquake Info</a></li>
        </ul>
    </div>

Я исследовал несколько различных подходов, но большинство из нихполагаться на ссылки на страницы (например, articles.html) вместо каталогов (например, ../articles/).

Я видел метод класса body / ID и предпочел бы автоматическое решение jQuery.

Вот мой сайт .

Answer 1

Вот как я это делаю на своем личном сайте.(Ссылка Здесь )

<ul id="navLinks">
    <li><a id="homeLink" href="/">Home</a></li>
    <li><a id="blogLink" href="/blog/">Blog</a></li>
    <li><a id="photosLink" href="/photo-gallery/">Photos</a></li>
    <li><a id="portfolioLink" href="/portfolio/">About Me</a></li>
    <li><a id="contactLink" href="/contact/">Contact</a></li>
</ul>



var section = window.location.pathname;

if (section == '/') { $('#homeLink').attr('class', 'selected'); }
if (section.substring(0, 5) == "/blog") { $('#blogLink').attr('class', 'selected'); }
if (section.substring(0, 9) == "/articles") { $('#blogLink').attr('class', 'selected'); }
if (section.substring(0, 8) == "/contact") { $('#contactLink').attr('class', 'selected'); }
if (section.substring(0, 14) == "/photo-gallery") { $('#photosLink').attr('class', 'selected'); }
if (section.substring(0, 10) == "/portfolio") { $('#portfolioLink').attr('class', 'selected'); }

Answer 2

Хотя я не смог найти решение jQuery, я нашел хорошую альтернативу Javascript .

Answer 3

это должно разобрать вас.
вам может понадобиться немного настроить его для работы с папками ..

Answer 4

Вы можете сделать это с помощью document.location.href и разделения строки.

Выполните цикл между вашими элементами, сравните их с разделенной строкой и добавьте класс к правой.