0

i have a menu that have the route like this (about / services / basic services) . i want when i click on basic services after the page refresh the active li goes on basic services li tag . and other tags removed from active class . how can i do it?|

<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>

and js:

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

i tried the js above vut after refreshing page it is not working.

Yeganeh Salami
  • 497
  • 5
  • 24
  • using cookie or local storage for html 5 looks fine for your trial `https://stackoverflow.com/questions/1458724/how-do-i-set-unset-cookie-with-jquery` – Iqbal Rizky May 23 '17 at 16:58

2 Answers2

0

you should put a 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");
alessandrio
  • 3,901
  • 2
  • 27
  • 36
0

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>

and the .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"))
    }
  });
Luciano Huguenin
  • 185
  • 5