Javascript 点击更改css站点范围

我要做的是根据所选的选项显示两个不同的菜单。 在我的代码片段中，您可以看到我有选项a和选项b

.选项a、.选项b{ 文本转换：大写； 显示：内联块； } .选项a:悬停，.选项b:悬停{ 文字装饰：下划线； } .选项a-内容{ 显示：块； } .选项b-内容{ 显示：无； } 方案A 方案B 这是一本书的内容

---

下面是一个在localstorage中存储状态的简单示例：

$(function(){
    $(".option-toggle").on("click", function(){
        //get the href of the clicked item. This is the id of the element we wish to show
        var selectedOptionID=$(this).attr("href");
        //hide all option-content elements
        $(".option-content").attr("aria-hidden",true);
        //show the one we want
        $(selectedOptionID).attr("aria-hidden",false);
        //remember the active one in localstorage 
        localStorage.setItem("selectedOptionID", selectedOptionID);
    });

    //onload, read from local storage and trigger a click on the appropriate option:
    var selectedOptionIdFromStorage = localStorage.getItem("selectedOptionID");
    if(selectedOptionIdFromStorage){
        //trigger a click on the select-option having a href equal to selectedOptionIdFromStorage:
        $(".option-toggle[href='"+selectedOptionIdFromStorage+"']").trigger("click");
    }
});

---

纯代码编写请求与堆栈溢出无关-我们希望这里的问题与特定的编程问题相关-但我们很乐意帮助您自己编写！告诉我们，你被困在哪里了。这也将帮助我们更好地回答您的问题。哦，很抱歉，我的问题是，当使用jquery css函数时，我无法让它在页面之间导航时保持这种状态，因此我可以让它启用/禁用任何一个div，但当我离开我使用它的页面时，它会重置回默认值。您需要记住状态，例如，客户端与本地存储或服务器端与会话变量。根据您选择的解决方案，您的应用程序必须找出内容应处于的状态，然后相应地进行更新。既然您在页面上使用JavaScript，我建议您将用户的选择存储在localstorage中，并在documentReady上检索它。请看：我本想把它放在一个片段中，但由于本地存储限制，它无法工作。