How do i use localStorage for an active link

user_6499765 0
Viewed 705

I am trying to keep the focus CSS(basically, an active link CSS) on any link even after a page refresh. before I added the local storage snippet it worked, and it worked because the links I was switching to were '#' and didn't refresh upon click, I am using jquery. right now, nothing works.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
<script type="text/javascript ">
    $(document).ready(function() {
    $('ul li a').click(function() {
        localStorage.setItem("clicked", $(this).attr("id"));
    });
    var foocus = localStorage.getItem("clicked") || "home"; //<default
    $('li a').removeClass("foocus");
    $("#" + foocus).addClass("foocus");
    });
    });
</script>

HTML code

<div class="main-nav ">
                <a href=" " class="logo "><span><img src="images/logo.svg " alt=" "></span><span class="logo-text ">N</span></a>
                <ul class="main-menu ">
                    <li id="home">
                        <a href="index.html "><img class="nav-items " src="images/home.svg " alt=" "><span>Home</span></a>
                    </li>
                    <li>
                        <a href="# "><img class="nav-items " src="images/male.svg " alt=" "><span>Pas</span></a>
                    </li>
                    <li>
                        <a href="# "><img class="nav-items " src="images/doctor.svg " alt=" "><span>Dors</span> </a>
                    </li>
                    <li>
                        <a href="# "><img class="nav-items " src="images/lab.svg " alt=" "><span>Lab Tests</span> </a>
                    </li>
                </ul>
            </div>

CSS

.main-nav ul li a {
    font-family: Segoe UI;
    font-weight: 350;
    padding-bottom: 1px;
    padding-left: 15px;
}

.main-nav ul li a span:hover {
    font-weight: 700;
}

.foocus {
    background: #8BC2A1;
    border-radius: 7.5px;
    width: 168px;
    height: 38px;
    padding-left: 30px !important;
    display: block;
    font-weight: 700 !important;
}
jquery javascript
1 Answers

You are not targeting the correct id attr when clicking on an li item in your menu. Also, you need to removeClass foocus on all li's and addClass to the clicked li only in your click function.

I have fixed up your code (HTML, jQuery) and is working as expected now. Replace your code this below and it should work fine as expected.

$(document).ready(function() {
  $('.main-menu > li').click(function() {
    //set localStorage
    localStorage.setItem("clicked", $(this).attr("id"))
    //remove from all li
    $('li').removeClass("foocus")
    //Add class to the clicked li
    $(this).addClass("foocus")
  });

  //get class on load
  var foocus = localStorage.getItem("clicked")
  foocus ? $("#" + foocus).addClass("foocus") : $('#home').addClass("foocus")
})

Working Demo: (Test this code in your browser since stack-overflow snippet does not support localStorage)

$(document).ready(function() {

  $('.main-menu > li').click(function() {
    //set localStorage
    //localStorage.setItem("clicked", $(this).attr("id"))
    //remove from all li
    $('li').removeClass("foocus")
    //Add class to the clicked li
    $(this).addClass("foocus")
  })

  //get class on load
  //var foocus = window.localStorage.getItem("clicked")
  //foocus ? $("#" + foocus).addClass("foocus") : $('#home').addClass("foocus")
})
.main-nav ul li a {
  font-family: Segoe UI;
  font-weight: 350;
  padding-bottom: 1px;
  padding-left: 15px;
}

.main-nav ul li a span:hover {
  font-weight: 700;
}

.foocus {
  background: #8BC2A1;
  border-radius: 7.5px;
  width: 168px;
  height: 38px;
  padding-left: 30px !important;
  display: block;
  font-weight: 700 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-nav">
  <a href=" " class="logo "><span><img src="images/logo.svg " alt=" "></span><span class="logo-text">N</span></a>
  <ul class="main-menu">
    <li id="home">
      <a href="#"><img class="nav-items " src="images/home.svg" alt=" "><span>Home</span></a>
    </li>
    <li id="pas">
      <a href="# "><img class="nav-items " src="images/male.svg " alt=" "><span>Pas</span></a>
    </li>
    <li id="dors">
      <a href="# "><img class="nav-items " src="images/doctor.svg " alt=" "><span>Dors</span> </a>
    </li>
    <li id="labtests">
      <a href="# "><img class="nav-items " src="images/lab.svg " alt=" "><span>Lab Tests</span> </a>
    </li>
  </ul>
</div>

user_136690480
Related