Question

这使用的是jQuery UI 1.12.1和jQuery 3.1.1。首先，我使用此功能将两个标签的状态存储在currentIdx的localStorage中：

$("#tabs").tabs({
 active: localStorage.getItem("currentIdx"),
 activate: function(event, ui) {
      localStorage.setItem("currentIdx", $(this).tabs('option', 'active'));
  }
});

它存储活动选项卡（1或0），并在浏览器重新启动后重新加载页面上的该选项卡。标签更改时触发，并且我可以在控制台中看到currentIdx的值更改。

我也在使用此功能

function checkStorage(){
    if (localStorage.getItem("currentIdx") == "1") {
$('body').addClass('yes');  
    } else {
$('body').addClass('no');   
    };
}

检查currentIdx的值并根据该值更改正文类。我在CSS中有两个类，body.yes和body.no。我使用此正文标签触发checkStorage：

<body onload="checkStorage()">

在初始页面加载中，我在开发工具中看到<body onload="checkStorage()" class="not">或<body onload="checkStorage()" class="yes">，并且正文CSS发生了变化。

这两个正文类在初始页面加载或新窗口或标签上工作，因此正在读取currentIdx。

但是body类在选项卡更改时不会更改；它确实会发生变化。之后，我在更改标签页后刷新了页面。

那么，如何使我的身体课一直被阅读呢？我尝试了$(document).ready(function()，但这无济于事。

修改

此方法无需使用onload="checkStorage()中的<body>；可能不是真的很漂亮，但是可以起作用：

$(document).ready(function() {

    checkStorage();

        $("#tabs").tabs({
        active: localStorage.getItem("currentIdx"),
        activate: function(event, ui) {
        localStorage.setItem("currentIdx", $(this).tabs('option', 'active'));

    checkStorage();

    }
});

function checkStorage(){

        if (localStorage.getItem("currentIdx") == "1") {
        $('body').toggleClass('sucks').addClass('yes');  
        } else {
        $('body').removeClass('not').addClass('no');   
        };
        }

});

Answer 1

您在这里找到解决方法

$("#tabs").tabs({
  active: localStorage.getItem("currentIdx"),
  activate: function(event, ui) {
    localStorage.setItem("currentIdx", $(this).tabs('option', 'active'));
    checkStorage();
  }
});

function checkStorage(){
  if (localStorage.getItem("currentIdx") == "1") {
    $('body').removeClass('no').addClass('yes');  
  } else {
    $('body').removeClass('yes').addClass('no');   
  }
}

希望这会对您有所帮助。

在身体负荷或准备好文档时读取localStorage的值

1 个答案: