CSS Add Class active 在页面重新加载后阻止答案

【问题标题】：CSS Add Class active to block after page reloadCSS Add Class active 在页面重新加载后阻止
【发布时间】：2018-06-27 05:17:09
【问题描述】：

我有以下 HTML：

<div class="side-button"> 
   <a href="/first"> First Option <a>
</div>
  <div class="side-button"> 
   <a href="/second"> Second Option <a>
</div>

当用户单击其中一个块时，我希望它变为活动状态，以便我可以用另一种颜色突出显示它。

在我的 jQuery 中，我试图在单击的块上添加类 active：

jQuery(document).ready(function( $ ){
    $(".side-button").bind('click', function () {
      $(".side-button").removeClass("active");
      $(this).addClass("active");
    });
});

它在下一页加载时工作。重定向后，不记得active类了。

如何添加active 类，以便它会记住加载页面上的内容？

【问题讨论】：

使用本地存储来记住状态。
Keep CSS from refreshing on page reload的可能重复
sessionStorage 在这里可能更合适
@Shree 谢谢！效果很好！

标签： javascript jquery html css

【解决方案1】：

为了记住重定向/页面加载的内容，我们可以使用本地存储/会话存储

 jQuery(document).ready(function( $ ){
        var retrievedClassName = localStorage.getItem('activeClass');
        if(retrievedClassName == "active"){
             //add active class to your element
        }
        $(".side-button").bind('click', function () {
          $(".side-button").removeClass("active");
          $(this).addClass("active");
          localStorage.setItem('activeClass', "active");
        });
    });

【讨论】：

谢谢！您的脚本有助于记住 .side-button 已被单击。但我有 8 个块与同一类 .side-button。所以在这一步：//add active class to your element 我不能只添加活动类，因为它将应用于所有 8 个块。我还需要以某种方式记住 .side-button 中的哪一个被准确点击。
为此，您需要为 8 个块设置一个唯一的 ID。这样，您就可以记住单击了哪个侧按钮。

【解决方案2】：

您可以使用Window.sessionStorage 或Window.localStorage。但在继续之前，我会要求你调查一下：HTML5 Local storage vs. Session storage

会话存储：

您可以使用Window.sessionStorage 在点击事件中设置元素href 属性和class。然后在页面加载时从sessionStorage 获取那些设置在元素上：

// Get
var status = sessionStorage.getItem("status");
var elHref = sessionStorage.getItem("elementsHref")
$("a[href$='"+elHref+"']").addClass(status);

$(document).ready(function($){
  $("a").bind('click', function () {
    // Set
    sessionStorage.setItem("status", "active");
    sessionStorage.setItem("elementsHref", $(this).attr("href"))
    $("a").removeClass(sessionStorage.getItem("status"));
    $(this).addClass(sessionStorage.getItem("status"));
  });
});

本地存储：

您可以通过使用Window.localStorage 来实现相同的目的，如下所示：

// Get
var status = localStorage.getItem("status");
var elHref = localStorage.getItem("elementsHref")
$("a[href$='"+elHref+"']").addClass(status);

$(document).ready(function($){
  $("a").bind('click', function () {
    // Set
    localStorage.setItem("status", "active");
    localStorage.setItem("elementsHref", $(this).attr("href"))
    $("a").removeClass(localStorage.getItem("status"));
    $(this).addClass(localStorage.getItem("status"));
  });
});

【讨论】：

【解决方案3】：

$(function(){
    $(".block").on('click', function () {
      $(this).removeClass("active");
      $(this).addClass("active");
    });
});

【讨论】：