即使页面刷新也如何保持.current类

Question

I have following script that adds current class to <li> in a Joomla based website:

$(function(){
  $("#slide-menu > li ").click(function(e){
    e.preventDefault();
    $("#slide-menu > li ").addClass("current").not(this).removeClass("current");
  });
});

But when I click on the link page refresh and current class disappear Here is my html:

<ul id="slide-menu" class="menu menu-sidebar">
  <li class="level1 item187">
    <a class="level1" href="/plastikovye-okna-i-dveri/other/plastikovye-okna-i-dveri">
     <span>Пластиковые окна</span>
    </a>
  </li>
  <li class="level1 item188">
    <a class="level1" href="/plastikovye-okna-i-dveri-2/uncategorised/okna-rehau">
     <span>Входные двери</span>
    </a>
  </li>
</ul>

Answer 1

after the page refresh it will load everything again, so you can't keep it , but you can follow one of those three methods to achieve this:

1. sending an ajax call to the server and save it there
2. save the value to cookies and in your script when it loads it should check if that cookie exists and load the value from it
3. match the current selected elements from the requested URL.

Good luck

Answer 2

You can use two things to storage this kind of things. LocalStorage or in a Session, if you want to keep it fully client side I should use LocalStorage.

LocalStorage

With localstorage you can save the currentClass. This prevents you from using serverside code.

A little example:

/* Set localStorage item */
localStorage.setItem('name', 'value');

/* Get localStorage item */
localStorage.alpha;

/* Or */
localStorage['alpha'];

When you saved the class with is current in the localStorge you can add it on the document ready.

Session Storage

Another way to store it is in an session. This requeres a request to your server. Best thing to do this is with Ajax ( I use the jquery lib for this ).

A little example:

Set Session

/*  Client side */
function setSession($key, $value) {
   $.ajax({
     type: "POST",
     url: "setSession.php",
     data: { key: "Foo", value: "Bar" }
    });
}

/* Server side (PHP example) */
<?php
  /* secure it your self. */
  $_SESSION[$_POST['key']] = $_POST['value'];
?>

Get Session

/*  Client side */
function getSession($key) {
   $.ajax({
     type: "POST",
     url: "getSession.php",
     data: { key: "Foo" }
    }).done(function( callback ) {
      return callback ;
    });
}

/* Server side (PHP example) */
<?php
  /* secure it your self. */
  echo $_SESSION[$_POST['key']];
?>

Use the function

var foo = getSession("foo");

Check the currentClass and do your trick ;)