активный класс по пункту меню и родительского

-2

у меня есть этот HTML-код для моего меню:активный класс по пункту меню и родительского

<nav id="main-navigation" class="navigation-simple"> 
<ul> 
    <li><a href="/">Home</a></li>   
    <li><a class="active-nav" href="">About Us</a> 
    <ul>       
     <li><a class="active-nav" href="about">About</a></li>    
     <li><a href="testimonials">Testimonials</a></li> 
     <li><a href="meet-the-team">Meet The Team</a></li> 
    </ul> 
    </li> 
</nav>

я добавил в active-nav классе, но как я могу автоматически установить активный класс на родительских и дочерних элементов, когда ток URL-адрес: href значение ссылки?

источник

2015-06-15 charlie

Вы не можете использовать только css. Вам придется либо использовать Javascript, либо установить 'active-nav' внутри вашего шаблона на стороне сервера (php или что-то еще). Я бы пошел на этот последний вариант, чтобы предотвратить «мигание» и иметь активный элемент для пользователей с отключенным js .. – Pevara

jquery или javascript в порядке – charlie

«активное меню js на основе url» дало мне результаты 800k в Google. Возможно, вам следует сначала провести исследование ... – Pevara

Для этого вам нужен скрипт java, jQuery отлично подходит для начинающих!

Это может быть сделано, как это:

var url = window.location.href; 
$("nav li a").each(function(index) { 
    if (url.indexOf($(this).attr('href')) >= 0){ 
    $(this).addClass('active-nav'); 
    } 
});

построчно -

получить текущий URL страницы
для каждой ссылки в навигации ...
проверки, если его href находится в текущем URL-адресе
если есть, добавьте класс 'active-nav'
близко, если заявление
близко петли

источник

2015-06-15 21:04:51 Drodarious

Вы забыли родительские элементы. И это может сломаться, когда у вас есть такие ссылки, как 'about',' about-us', 'all-about-our-products'. 'about' будет активен на всех 3 этих страницах ... – Pevara

Да, я бы посоветовал не помещать сломанные ссылки на nav. основная ссылка «about» nav должна ссылаться на первую страницу в этом разделе. Если вы это сделаете, это будет работать на 100%. Вы правы, но главная ссылка «о» будет выбрана на всех подстраницах, но это то, как она выражается в примере OPs выше. – Drodarious

Правда, абсолютные пути также предпочтительны имо, возможно, вам следует объяснить это в вашем ответе. Вы делаете предположения, которые могут быть неверными. И о тех примерах ссылок, которые я дал, что, если они все являются братьями и сестрами? И нет ссылки href на родительскую ссылку «О», поэтому я все равно думаю, что вы должны также покрывать родительские элементы. Хорошее усилие, хотя – Pevara

Что-то вроде:

$(function() { 
    $('#main-navigation a').each(function() { 
    if(this.href.indexOf(window.location.pathname) === 0) { 
     $(this).addClass('active-nav'); 
    } else { 
     // case when something was set to active by the server 
     $(this).removeClass('active-nav'); 
    } 
    }); 
});

будет делать эту работу.

Удостоверьтесь, что вы выполняете условие if, безопасное для реализации на вашем сайте deeplinking (например, параметры GET, привязки или несколько доменов с одним и тем же именем могут быть включены в вашу навигацию).

источник

2015-06-15 21:08:29

Вы можете использовать метод .filter() найти соответствующую ссылку и добавить необходимый класс:

$('#main-navigation li > a').removeClass('active-nav') 
.filter(function() { 
    return location.href.indexOf(this.href) > -1; 
}) 
.addClass('active-nav') //add class to matched element(s) 
//add class to parent(s) of matched, if any 
.each(function() { 
    $($(this).parents('a'), '#main-navigation').addClass('active-nav'); 
});

Также не забудьте закрыть свой первый ul.

источник

2015-06-15 23:24:50 PeterKA

активный класс по пункту меню и родительского

ответ

Смежные вопросы