Question

我有一个菜单，有这样的路线（关于/ services / basic services）。我希望当我在页面刷新后点击基本服务时，活动的li会进入基本服务li标签。和从活动类中删除的其他标记。我该怎么办？|

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

我在刷新页面之后尝试了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"))
    }
  });

使用localstorage在页面刷新后在li标签上添加活动类

2 个答案: