Попытка сохранить выбранный div в navbar активным после обновления страницы

Question

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

navbar.html.erb

<%= link_to activities_path, :class => "icon active" do %>
      <i class="fas fa-home icon-selector"></i>
      <p>Home</p>
  <% end %>
  <%= link_to new_list_path, :class => "icon" do %>
      <i class="fas fa-edit icon-selector"></i>
      <p>New List</p>
  <% end %>

update_icon.js

$(document).ready(function() {
 $(".icon").click(function () {
$(".icon").removeClass("active");
// $(".tab").addClass("active"); // instead of this do the below
$(this).addClass("active");
 });
});

Answer 1

попробуйте это:

<%= link_to activities_path, :class => "icon <%= 'active' if @active_nav == 'activities' %>" do %> <i class="fas fa-home icon-selector"></i> <p>Home</p> <% end %> <%= link_to new_list_path, :class => "icon <%= 'active' if @active_nav == 'new_list' %>" do %> <i class="fas fa-edit icon-selector"></i> <p>New List</p> <% end %>

в вашем activities#index

@active_nav = 'activities'

и lists#new

@active_nav = 'new_list'

Answer 2

Вы можете использовать localStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Чтобы сохранить значение для активного класса:

$(document).ready(function() {
$(".icon").click(function () {
$(".icon").removeClass("active");
// $(".tab").addClass("active"); // instead of this do the below
$(this).addClass("active");
localStorage.setItem('selectedTab', 'active');

Когда вы перезагрузите страницу, проверьте, содержит ли localStorage активное значение:

let tabValue = localStorage.getItem('selectedTab');
if(tabValue !== '') {
  $('icon').addClass(tabValue);
} else {
  tabValue = '';
}

Все, что хранится в localStorage, выживет после перезагрузки страницы и закрытия браузера.

EDIT:

Приведенный ниже код сохранит активную вкладку в localStorage и установит активный класс на вкладке при перезагрузке страницы

index.html

<div class='icon'>
<i class="fas fa-home icon-selector"></i>
<p>Home</p>  
</div>
<div class='icon'>
<i class="fas fa-edit icon-selector"></i>
<p>New List</p>
</div>

index.js

$(document).ready(function() {
 $(".icon").click(function () {
   $(this).addClass('active');
   let text = $(this).find('p').text();
   localStorage.setItem('selectedTab', text);
   $('.icon').find('p').each(function() {
     if($(this).text() !== text) {
     $(this).parent().removeClass('active');
     }
   })
 });
  let selectedTab = localStorage.getItem('selectedTab');
   $('.icon').find('p').each(function() {
     if($(this).text() === selectedTab) {
     $(this).parent().addClass('active');
     }
   })
});

У меня есть живой пример на CodePen: https://codepen.io/anon/pen/bxqLXg?editors=1111

Если вы нажмете, например, на вкладку «Домой», будет установлен «активный» класс. Если вы затем нажмете «Новый список», «активный» класс будет удален с вкладки «Домой» и вместо него установлен «Новый список». Если вы перезагрузите страницу, localStorage будет проверен на последнюю нажатую вкладку, а затем эта вкладка получит «активный» класс. Попробуйте пример CodePen и дайте мне знать, если у вас есть дополнительные вопросы.