Question

我正在尝试在重新加载时保持选中的标签处于活动状态。尝试并检查了这里已经提出的一些问题，但对我来说没有任何工作。到目前为止，活动类在单击时会正确跳转，但是单击将我定向到新页面，然后切换回默认的活动div。这是我的代码：

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

您可以使用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中的任何内容在页面重新加载并关闭浏览器后都不会丢失。

编辑：

下面的代码会将活动标签存储在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中是否单击了“ lastet”选项卡，然后该选项卡将获得“活动”类。试用CodePen示例，如果您还有其他问题，请告诉我。

Answer 2

尝试一下：

<%= link_to activities_path, :class => "icon <%= 'active' if @active_nav == 'activities' %>" do %> Home <% end %> <%= link_to new_list_path, :class => "icon <%= 'active' if @active_nav == 'new_list' %>" do %> New List <% end %>

在您的activities#index

中

@active_nav = 'activities'

和lists#new

中

@active_nav = 'new_list'

刷新页面后尝试保持导航栏中选定的div处于活动状态

2 个答案: