Динамическая установка активной ссылки на статическую навигацию

Question

У меня есть файл «navigation.html» (статический кодированный навигатор), загруженный на несколько страниц, с использованием jQuery .load() Теперь мне нужно динамически установить активный <li> для каждого щелчка на странице. Я не могу использовать идентификатор тела по определенным причинам. Любые другие способы сделать это?

Answer 1

Если вы можете определить текущую страницу по классу или идентификатор (например: корпус> DIV # контактов) для contacts.html и этот класс/идентификатор уникальный, тогда вы должны сопоставить его с вашей навигацией, иначе вам нужно сопоставить значение window.location.href (проанализированное, если хотите) против вашей навигации.

changeActiveLink определяется в JS (например: init.js) файл, который вы включаете для каждой страницы

function changeActiveLink() { 
    var currentLocation = window.location.href; 
    currentLocation = currentLocation.replace('//', '/').split('/'); 
    var page = currentLocation[currentLocation.length - 1]; 

    if (page == "") { page = 'index.html'; } 

    $('#leftNav1 a[href*="'+ page +'"]').addClass('active'); 
} 

Эта строка вызывается из каждого файла, когда «init.js» включен в стоимость.

$('#leftNav1').load('navigation.html', changeActiveLink); 

Answer 2

Вы можете настроить сценарий jquery, чтобы получить URL-адрес, а затем найти href li, который соответствует этому. Это позволит вам добавить addClass() в этот актив.

Это, конечно, будет работать, только если HREF соответствует URL

Answer 3

Или вы можете использовать любой тег HTML или даже HTML5 для указания элемента li.

<li class="some"> 

или

<li title="some"> 

или

<li attr-specify="some-specific-in-url"> 

и JQuery с window.location объекта $ ('Li [название = "' + window.location.path +"] «) .addClass ("активный");