クリックでCSSサイト全体を変更

Question

私がやっていることは、選択されているオプションに基づいて2つの異なるメニューを表示することです。あなたは、私がoption aとoption b

.option-a, .option-b { 
 
    text-transform: uppercase; 
 
    display: inline-block; 
 
} 
 

 
.option-a:hover, .option-b:hover { 
 
    text-decoration: underline; 
 
} 
 

 
.option-a-content { 
 
    display: block; 
 
} 
 
.option-b-content { 
 
    display: none; 
 
}

<div class="option-a"> 
 
Option A 
 
</div> 
 
<div class="option-b"> 
 
Option B 
 
</div> 
 
<br> 
 
<br> 
 
<div class="option-a-content"> 
 
This is the contents of A 
 
</div>

option-a-contentを持って見ることができます私のスニペットで はdisplay: blockとoption-b-contentに設定されているdisplay: none;

に設定されている私は「あなたがクリックしたときにそれを作りたいですオプションB 'option-a-contentのCSSをdisplay: noneに変更し、それをdisplay: block

012に変更します

編集：明確にするために、私の問題は、クリックで変更するCSSを得ることができますが、ページから移動するとデフォルトに戻ります。

Answer 1

ここでの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"); 
    } 
}); 

https://jsfiddle.net/jvsnphmn/3/