Question

我有以下脚本在基于Joomla的网站中将当前类添加到<li>：

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

但是当我点击链接页面时刷新并且当前类消失了这是我的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

页面刷新后会再次加载所有内容，所以你不能保留，但你可以按照这三种方法中的一种来实现：

向服务器发送ajax调用并将其保存在那里
将值保存到cookie，并在加载时将脚本保存在脚本中，检查该cookie是否存在并从中加载值
匹配请求的网址中当前选定的元素。

Answer 2

你可以用两件事来存储这类东西。 LocalStorage或在Session中，如果你想让它完全保留在客户端，我应该使用LocalStorage。

<强> localStorage的

使用localstorage，您可以保存currentClass。这可以防止您使用服务器端代码。

一个小例子：

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

/* Get localStorage item */
localStorage.alpha;

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

当您在localStorge中保存当前类时，可以将其添加到文档准备就绪上。

会话存储

存储它的另一种方法是在会话中。这会重新请求您的服务器。最好的办法是使用Ajax（我使用jquery lib）。

一个小例子：

设置会话

/*  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'];
?>

获取会话

/*  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']];
?>

使用功能

var foo = getSession("foo");

检查currentClass并做你的技巧;）

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

2 个答案: