Question

我有以下HTML：

if some_condition:
    error_msg = {
        "error": True,
        "errors": [
            {
                "message": "Field %s does not exist"%('my_test_field'),
                "code": 1050
            }
        ]
    }
    raise CustomAPIException(error_msg)

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

在我的jQuery中，我试图在单击的块上添加类<div class="side-button"> <a href="/first"> First Option <a> </div> <div class="side-button"> <a href="/second"> Second Option <a> </div>：

active

它在加载下一页时起作用。重定向后，它不记得jQuery(document).ready(function( $ ){ $(".side-button").bind('click', function () { $(".side-button").removeClass("active"); $(this).addClass("active"); }); });类了。

如何添加类active，以便它会在加载的页面上记住这一点？

Answer 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");
        });
    });

Answer 2

您可以使用Window.sessionStorage或Window.localStorage。但是在继续之前，我将要求您研究：HTML5 Local storage vs. Session storage

会话存储空间：

您可以使用Window.sessionStorage来设置click事件中的元素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"));
  });
});

Answer 3

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

CSS Add Class在页面重新加载后处于活动状态以阻止

3 个答案: