Javascript 使用jQuery激活多个lavel下拉菜单集

当我点击菜单示例“C”时，我想将类设置为活动。在重新加载页面后，它也应该处于活动状态

<ul class="nav metismenu" id="side-menu">                 
<li>
    <a href="#">Dashboards</a>
    <ul class="nav nav-second-level collapse">
        <li><a href="#A">A</a></li>
        <li><a href="#B">B</a></li>
        <li><a href="#C">C</a></li>
        <li><a href="#D">D</a></li>
        <li><a href="#E">E</a></li>
    </ul>
</li>
<li>
    <a href="F">F</a>
</li>   
</ul>    

要将类设置为活动，代码为：

<ul class="nav metismenu" id="side-menu">                 
<li class="active">
    <a href="#">Dashboards</a>
    <ul class="nav nav-second-level collapse">
        <li><a href="#A">A</a></li>
        <li><a href="#B">B</a></li>
        <li class="active"><a href="#C">C</a></li>
        <li><a href="#D">D</a></li>
        <li><a href="#E">E</a></li>
    </ul>
</li>
<li>
    <a href="F">F</a>
</li>   
</ul>    

首先，我邀请您了解更多关于

因此，对于这种情况，这里是Working Fiddle=> 我在小提琴中使用了JQuery（别忘了在源代码中使用JQuery）

ps：对于安全问题，代码段不能在这里工作

JS:

$( document ).ready(function(){
  if(typeof(getCookie("activeLi")) != "undefined" && getCookie("activeLi").length>0){
    $('#side-menu ul a[ href=' + getCookie("activeLi") + ']').parent().addClass("active");
  }
  $("#side-menu ul a").click(function(a){
        if(typeof(getCookie("activeLi")) != "undefined");
        alert(getCookie("activeLi"));
        removeActive();
        $(this).parent().addClass("active");
      setActiveCookie(this.getAttribute("href"));
  });
});

function removeActive(){
    $("#side-menu ul li").each(function(li){
    $(this).removeClass("active");
  })
}

function setActiveCookie(active){
      //document.cookie="activeLi="+active;
    var d = new Date();
    d.setTime(d.getTime() + (30*24*60*60*1000)); // expire in 30 days
    var expires = "expires="+d.toUTCString();
    document.cookie="activeLi="+active+"; " + expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
}

.active a {
  color: green;
}
a {
  text-decoration: none;
}

<ul class="nav metismenu" id="side-menu">                 
<li>
    <a href="#">Dashboards</a>
    <ul class="nav nav-second-level collapse">
        <li><a href="#A">A</a></li>
        <li><a href="#B">B</a></li>
        <li><a href="#C">C</a></li>
        <li><a href="#D">D</a></li>
        <li><a href="#E">E</a></li>
    </ul>
</li>
<li>
    <a href="F">F</a>
</li>

HTML:

$( document ).ready(function(){
  if(typeof(getCookie("activeLi")) != "undefined" && getCookie("activeLi").length>0){
    $('#side-menu ul a[ href=' + getCookie("activeLi") + ']').parent().addClass("active");
  }
  $("#side-menu ul a").click(function(a){
        if(typeof(getCookie("activeLi")) != "undefined");
        alert(getCookie("activeLi"));
        removeActive();
        $(this).parent().addClass("active");
      setActiveCookie(this.getAttribute("href"));
  });
});

function removeActive(){
    $("#side-menu ul li").each(function(li){
    $(this).removeClass("active");
  })
}

function setActiveCookie(active){
      //document.cookie="activeLi="+active;
    var d = new Date();
    d.setTime(d.getTime() + (30*24*60*60*1000)); // expire in 30 days
    var expires = "expires="+d.toUTCString();
    document.cookie="activeLi="+active+"; " + expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
}

.active a {
  color: green;
}
a {
  text-decoration: none;
}

<ul class="nav metismenu" id="side-menu">                 
<li>
    <a href="#">Dashboards</a>
    <ul class="nav nav-second-level collapse">
        <li><a href="#A">A</a></li>
        <li><a href="#B">B</a></li>
        <li><a href="#C">C</a></li>
        <li><a href="#D">D</a></li>
        <li><a href="#E">E</a></li>
    </ul>
</li>
<li>
    <a href="F">F</a>
</li>

你能给我们看看你的JavaScript吗？不，我不能给我们看我的JavaScript，这太令人伤心了。。祝你好运：）看看上面的答案！你的回答对我帮助很大。谢谢你的赏识