Jquery - addClass('active') в Top Navigation, если он соответствует текущему родителю активной ссылки в аккордеоне.

Проблема в том, что у меня навигация состоит из двух частей. Верхняя навигация и левая навигация. Мне нужно указать верхней ссылке класс «.active», если левая навигационная сестра является текущим URL-адресом.

ПРИМЕР: Если вы находитесь на дочерней ссылке about, т.е. «Bio», мне нужно указать верхней навигационной ссылке «About», чтобы иметь класс .active.

Главная | О | Контакты

‹-- Содержимое страницы здесь -->

<ul id="leftnav">
      <li>Home</li>
      <li><a href="ul.com/">About</a>
            <ul>
                  <li>Bio</li>
                  <li>History</li>
                  <li>Location</li>
            </ul>
      </li>
      <li>Contact</li>
</ul>

Я пробовал это:

$(document).ready(function() {
    currentPage = window.location.pathname;
    if( $('.sidebarNav li a[href$="' + currentPage + '"]').parent('#aboutParent')) {
        $('#aboutTopNav a').addClass('active');
    }
});

person Ethan H    schedule 18.01.2011    source источник
comment
Вы должны включить исходный html. Но я думаю, что это лучше делать на стороне сервера.   -  person demux    schedule 18.01.2011
comment
Я хотел бы сделать эту серверную часть, однако я работаю с клиентом, которому нужны статические html-страницы.   -  person Ethan H    schedule 18.01.2011


Ответы (2)


Используйте обход дерева jQuery, чтобы удовлетворить свои потребности: http://api.jquery.com/category/traversing/tree-traversal/

person Nikkelmann    schedule 18.01.2011
comment
У меня есть дерево, работающее внутри аккордеона, проблема возникает, когда мне нужно выйти за пределы аккордеона и указать ссылку в отдельной навигации для определенного класса. - person Ethan H; 18.01.2011

$(document).ready(function() {
var href_array= window.location.pathname.split("/");
var part_num = 0;
while (part_num < href_array.length) {
    lastPart = href_array[part_num];
    part_num += 1;
}
//alert( lastPart);

$('#navigationArea a[href*="' + lastPart + '"]').parentsUntil('.sub').addClass('active');

});

В моем примере «.sub» — это класс, но я думаю, что он также будет работать с вашим идентификатором.

person da_didi    schedule 18.01.2011
comment
Я работаю с двумя навигациями: одна в верхней части сайта, а другая в аккордеоне. Мне нужен родной брат в аккордеоне, чтобы указать совпадающую ссылку в верхней навигации (вне аккордеона), чтобы иметь класс активный. См. пример выше. Но я ценю вашу помощь - person Ethan H; 18.01.2011