Каковы варианты выбора текущего элемента навигации при использовании серверных включений?

Я использую неупорядоченный список из 10 элементов в качестве панели навигации. Используя SSI, я добавляю заголовок и панель навигации в каждый файл. Мне нужен способ добавить class="active" в набор правил текущей активной страницы (соответствующая <li> текущей страницы будет иметь другой стиль).

Включение файла на каждую страницу означает, что во включенном файле ни один из элементов не может иметь активный класс.

Есть ли способ сделать это всего несколькими строками кода? (используя jQuery/JS)

Мой другой вариант — сопоставить последнюю часть URL-адреса с частью href привязки в каждом элементе списка.

Решение: (любезно предоставлено Романом Горбатко)

var tab = window.location.pathname.split("/");
tab = tab[tab.length - 1];  // This probably is not efficient - suggestions?
if (tab != "") $("#nav a#" + tab).addClass("active");

javascript jquery navbar ssi server-side-includes
person Trojan    schedule 17.07.2013    source источник
comment
Я обычно делаю это на стороне сервера. Я сравниваю целевой шаблон с URL-адресом в навигации и соответствующим образом применяю класс. То же самое можно сделать с помощью javascript, проверив window.location, а затем манипулируя html для навигации. (например, добавление класса)   -  person Kevin B    schedule 17.07.2013
comment
возможный дубликат jQuery добавить класс .active в меню   -  person Mikael Söderström    schedule 17.07.2013
comment
Это отличная ссылка. Спасибо   -  person Trojan    schedule 17.07.2013

Ответы (4)


arrow_upward
2
arrow_downward

Например. У вас есть несколько страниц:

И ваше меню имеет следующий вид:

<ul>
    <li class="index">index</li>
    <li class="faq">faq</li>
    <li class="forum">forum</li>
</ul>

Теперь вы проверяете URL своей страницы.

var index = window.location.pathname.split('/')[1];
$('ul.li').removeClass('active');
$('li.' + index).addClass('active');

Прибыль!

person RomanGorbatko    schedule 17.07.2013
comment
Спасибо! Это, пожалуй, самый простой способ сделать это. - person Trojan; 17.07.2013
comment
Вы должны удалить активный класс из других li. - person vipulsharma; 17.07.2013
comment
@trojansdestroy Я изменил свой ответ, используя комментарий vipulsharma. - person RomanGorbatko; 17.07.2013
comment
@vipulsharma: в этом нет необходимости, так как во включенном файле ни один из элементов не имеет активного класса (я добавляю его на страницу через этот jQuery) - person Trojan; 17.07.2013

arrow_upward
5
arrow_downward

Сначала определите имя страницы

var index = document.location.href.lastIndexOf("/") + 1;
var page = document.location.href.substring(index,document.location.href.length);

Затем найдите li с тем же именем и добавьте к нему активный класс, учитывая, что панель навигации имеет панель навигации класса в ul.

$('ul.navbar li').each(function() {
    $(this).removeClass('active');   
    if($.trim($(this).text()) == page) {
        $(this).addClass('active');
    } 
});

Это удовлетворит ваше требование. ПРИМЕЧАНИЕ. Я предположил, что имя li совпадает с именем страницы.

person vipulsharma    schedule 17.07.2013

arrow_upward
1
arrow_downward

Вы можете сначала посмотреть на URL-адрес, чтобы определить имя страницы, а затем вы можете сопоставить имя страницы с классами, которые вы определяете в своих LI.

if(document.location.href.indexOf('index')>-1) {
      $('li.index').addClass('active')
}

Вы также можете сделать это с заголовком страницы, если хотите, вместо URL-адреса.

Еще одна хитрость заключается в том, чтобы добавить класс к тегу BODY для каждой страницы и позволить CSS сделать всю работу:

body.index li.index {
    background-color:#FF0000
}

body.aboutus li.aboutus {
  .... whatever
}
person Diodeus - James MacFarlane    schedule 17.07.2013
comment
Интересный. Я не думал о том, чтобы дать <body> класс; Я запомню этот трюк. Я искал то, на что vimpyboy ссылался выше. Спасибо за интригующий ответ! - person Trojan; 17.07.2013

arrow_upward
1
arrow_downward

Вот ссылка на бесплатное решение jquery/javascript

http://www.webtrainingcentre.com/server-side-includes/tutorials/create-active-links-using-common-include/

Я уверен, что это поможет.

person Community    schedule 17.03.2014
comment
Это самый разумный способ webtrainingcentre.com /server-side-includes/ Нет необходимости использовать JavaScript ‹!--#set var=page value=homepage --› ‹!--#set var=activeClass value=active --› ‹nav class =primNav› ‹ul› ‹li class=‹!--#if expr=$page = /homepage/ --› ‹!--#echo var=activeClass --› ‹!--#endif --› ›‹ a href=index.shtml title=Alle kabaler›Hjem‹/a›‹/li› ‹/ul› ‹/nav› - person user1271519; 23.02.2018