ページをリフレッシュした後にliタグでアクティブなクラスをローカルストアに追加

Question

私はこのようなルート（about/services/basic services）を持つメニューを持っています。私はページリフレッシュの後に基本的なサービスをクリックすると、アクティブなリは基本的なサービスのリタグになります。アクティブなクラスから削除された他のタグどうすればいいの？

<nav id="menu"> 
    <ul> 
     <li class="active"><a href="#/">Home</a></li> 
     <li><span>About</span> 
      <ul> 
       <li><span>Services</span> 
        <ul> 
         <li><a href="./index.html">basic sevices</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#/contact">Contact</a></li> 
    </ul> 
</nav> 

とJS：

var url = location.href; 
    console.log(url); 
    if ($(".mm-panels li").children("a").attr("href") == url) { 
     $(this).addClass("active"); 
    } 

私はそれが動作していないページを更新した後、VUT上記のjsを試してみました。

Answer 1

あなたはID

... 
<li class="active" id="home"><a href="#/">Home</a></li> 
... 

jQueryの

$(".mm-panels li a").click(function(){ 
    localStorage.setItem("clicked", $(this).attr("id")); 
}); 
var active = localStorage.getItem("clicked") || "home";//<default 
$(".mm-panels li").each(function(){ 
    $("this").removeClass("active"); 
}); 
$("#"+active).addClass("active"); 

Answer 2

Htmlの

<nav id="menu"> 
    <ul> 
     <li id="exclaseactiva" class="active"><a id="menu 1" href="#/">Home</a></li> 
     <li><span>About</span> 
      <ul> 
       <li><span>Services</span> 
        <ul> 
         <li><a id="menu2" href="./index.html">basic sevices</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li><a id="menu3" href="#/contact">Contact</a></li> 
    </ul> 
</nav> 

との.jsを置くべき

$(function() { 
    if (localStorage.getItem("menuActive") == undefined){ 
    $("nav a").click(function(e){ 
     console.log("Before:"+$("#exclaseactiva").attr("class")); 
     $("nav li").removeClass("active"); 
     console.log("After:"+$("#exclaseactiva").attr("class")); 
     $(e.target).addClass("active"); 
     alert("Clase de menu presionado: "+ $(e.target).attr("class")); 
     localStorage.setItem("menuActive", $(e.target).attr("id")); 
     }); 
    } else { 
     $("nav li").removeClass("active"); 
    $("#"+localStorage.getItem("menuActive")).addClass("active"); 
    alert($("#"+localStorage.getItem("menuActive")).attr("id")) 
    } 
    });