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

【问题标题】：Trying to keep selected div in navbar active after page refresh尝试在页面刷新后保持导航栏中选定的 div 处于活动状态
【发布时间】：2018-08-31 17:23:20
【问题描述】：

我试图在重新加载时保持选定的选项卡处于活动状态。尝试并检查了这里已经提出的一些问题，但对我没有任何作用。到目前为止，活动类在单击时正确跳转，但单击将我定向到新页面，然后切换回默认活动 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");
 });
});

【问题讨论】：

两个文件的代码相同？？请检查您的 update_icon.js 文件代码。
起来！抱歉现在编辑了

标签： javascript html ruby-on-rails

【解决方案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 会检查最后点击的选项卡，然后该选项卡将获得“活动”类。试用 CodePen 示例，如果您还有其他问题，请告诉我。

【讨论】：

非常感谢！我会将代码的第二部分包含在同一个文件中吗？不确定如何实现它。因为当我说将类（tabValue）添加到“..icon”时，我将它添加到所有图标元素中..
@Emanuel Cohen：是的，我已经编辑并重新发布了一个示例，这应该是您所要求的。
非常感谢！！一个问题：默认情况下，当用户登录时，他登陆主页但他没有点击图标。 “主页”图标是否仍处于活动状态？
@Emanuel Cohen：默认情况下，主页图标不会设置为活动状态，在用户单击选项卡之前不会设置活动类。为此，您需要检查 localStorage 是否包含属性“selectedTab”，如果未找到，请在“主页”选项卡上设置活动类。

【解决方案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'

【讨论】：