Внешний вид выбранного пункта меню на главной странице

Question

У меня есть веб-приложение с одной главной страницей, содержащей меню и несколько страниц .aspx. Меню что-то вроде https://jsfiddle.net/96bd8y0z/

<style> 
    a, a:visited { color:black } 
    a.link.active { color:blue; } 
<style> 

<script> 
    $(function() { 
     $('a.link').click(function() { 
     $('a.link').removeClass('active'); 
     $(this).addClass('active'); 
     }); 
    }); 

<ul> 
    <li><a href="#" class="link active">Home</a></li> 
    <li><a href="#" class="link">News</a></li> 
    <li><a href="#" class="link">Contact</a></li> 
    <li><a href="#" class="link">About</a></li> 
</ul> 

Это хорошо в скрипке работы: При выбор одной из ссылок в меню, его внешний вид изменения, в скрипке от черного до синего. Но когда я пытаюсь применить эту схему в своем веб-приложении, ссылка, которую я выбираю (скажем: «Новости») становится синей на секунду, загружается страница гиперссылки («Новости»), «Новости» снова становятся черными, и элемент меню «Дом» снова станет синим.

Я могу понять, что это происходит потому, что раздел главной страницы перезагружен, но я не знаю, как его решить.

Есть ли способ сохранить выбранный параметр активным (т. Е. Сохранить «Новости» синим)?

Я считаю, что этот вопрос похож на How to make menu by using Master Page with jquery?, но пользователь, который ответил на этот вопрос, нашел этот вопрос непонятным, и его ответ не разрешил его для меня.

Answer 1

Ну, меню перерисовывается на каждом запросе страницы, очевидно, что все классы, добавленные при открытии предыдущей страницы, исчезнут.

Итак, для выбора нужного элемента меню должна быть проверка для каждой ссылки: если атрибут `s href равен маршруту загруженной страницы, то добавьте к нему класс« active ».

Между тем, это плохая практика, чтобы сделать это с помощью javascript, лучше сделайте это при создании шаблона. Но если это должно быть сделано с JS, вы, вероятно, можете сделать что-то вроде этого (с помощью JQuery для выбора ссылок):

$(function() { 
    var links = $('.link'); 

    for (var i = links.length; i--;) { 
     var _this = $(links[i]); 

     if (document.URL.split('http://site-domain.net')[1] == _this.attr('href')) { 
      $('.link').removeClass('active'); 
      _this.addClass('active'); 
     } 
    } 
}); 

Вот скрипка пример:

https://jsfiddle.net/96bd8y0z/4/

Answer 2

Это, вероятно, будет лучше сделать это в фоновом режиме: сохранить переменную в aspx, которая указывает, на какой странице вы находитесь, а затем на главной странице, сравнить эту переменную для каждого меню и добавить «активный» класс только к той, которая вы хотите.

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

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

$(function() { 
    $('a.link').click(function() { 
     $('a.link').removeClass('active'); 
     $(this).addClass('active'); 

     // save the index for later (notice it's the index of the li, not the a) 
     localStorage.setItem("active", $(this).parent().index()); 
    }); 

    // read the previous index or initialize to the first one if first time 
    var active = localStorage.getItem("active") ? localStorage.getItem("active") : 0; 
    // add the active class to the element 
    $("ul li:nth-child(" + (parseInt(active)+1) +") a").addClass("active"); 
}); 

Вы можете видеть, что работает над этим JSFiddle: https://jsfiddle.net/96bd8y0z/6/ (перезапуск или перезагрузить страницу, чтобы увидеть, как синий ссылка остается). Но опять же, делать это в фоновом режиме было бы лучше.