html - 页面刷新后如何保持切换状态

Question

我有可扩展的菜单，您可以在此链接中查看代码..

我的问题是如何在页面刷新后保持切换状态。

感谢您的帮助。

Answer 1

如何将其保存在会话变量中？

Session("TopMenuState") = XYZ

其中 XYZ 是您的状态信息

更新

嗯，我会用我有限的 Javascript 技能尽力解释。

检查本地存储/会话存储是否可用，如下所示

if(typeof(Storage)!=="undefined")
  {
  // localStorage and sessionStorage supported
  }
else
  {
  // localStorage and sessionStorage NOT supported
  }

一旦您对本地存储可用感到满意，那么您可以继续编写实际脚本，否则，有人会认为代码可能不起作用？

此外，当用户单击滑动菜单中的链接时，想法是保留他/她单击的菜单的名称，当页面加载或呈现菜单时，您可以检查会话/本地存储查看单击了哪个菜单项（如果有）

因此，在滑动菜单中的链接中，您最终可能会得到以下内容：

<div class="menuContent">
  <a class="slider"><img alt="" id="bot" src="images/arrow_bottom.png"></a>
  <ul id="nav">
    <li><a href="#"><img src="images/t1.png" /> Home</a></li>
    <li>
      <ul id="1">
        <li><a href="#"><img src="images/empty.gif" />Link 1</a></li>
        <li><a href="#"><img src="images/empty.gif" />Link 2</a></li>
        <li><a href="#"><img src="images/empty.gif" />Link 2</a></li>
        <li><a href="#"><img src="images/empty.gif" />Link 3</a></li>
        <li><a href="#"><img src="images/empty.gif" />Link 4</a></li>
      </ul>
      // THIS LINE MODIFIED
      <span onclick="ProcessMenuLink('MenuItem1')" class="sub" tabindex="1"><img src="images/t2.png" />HTML/CSS</span>
    </li>
    <li>
      <ul id="2">
        <li><a href="#"><img src="images/empty.gif" />Link 6</a></li>
        <li><a href="#"><img src="images/empty.gif" />Link 7</a></li>
        <li><a href="#"><img src="images/empty.gif" />Link 8</a></li>
        <li><a href="#"><img src="images/empty.gif" />Link 9</a></li>
        <li><a href="#"><img src="images/empty.gif" />Link 10</a></li>
      </ul>
      // THIS LINE MODIFIED
      <span onclick="ProcessMenuLink('MenuItem2')" class="sub" tabindex="1"><img src="images/t3.png" />jQuery/JS</span>
    </li>
    <li><a href="#"><img src="images/t2.png" />PHP</a></li>
  </ul>
</div>

请注意：我的 javascript 技能有限，因此您可能需要检查此代码！它很可能在这里和那里缺少分号。

然后在子例程或函数中，您可能会有以下内容：

Void ProcessMenuLink(MenuItemId){
  if(typeof(Storage)!=="undefined")
    {
    // localStorage and sessionStorage supported
    //If the menuitem selected is valid
    if (MenuItemId == 1) Then 
      {
      //Save the selected menu ID/Name
      localStorage.MySelectedMenuItem=MenuItemId;
      // OPTIONAL - Call the toggle subroutine to toggle the selected menuitems
      // Code to call sliding routine if its not executed via the CLASS parameter
      }
    }
  else
    {
    // localStorage and sessionStorage NOT supported
    }
  }

现在，您已将 SELECTED MENU ITEM 保存在本地存储中，我假设页面会重新加载。

因此，当您的页面加载时，您将需要调用执行菜单动画或 SLIDING 的子例程，并根据本地存储的选定菜单项值将相关值传递给它。

Sub Window.OnLoad
  //load locally stored data
  if (localStorage.MySelectedMenuItem == 'MenuItem1')
    {
    // menu item with id 'MenuItem1' was selected so call the sliding routine
    // using whatever value you used to identify your first sliding menu
    }
  else
    {
    if (localStorage.MySelectedMenuItem == 'MenuItem2')
      {
      // menu item with id 'MenuItem2' was selected so call the sliding routine
      // using whatever value you used to identify your first sliding menu
      }
    else
      {
      // nothing was selected or an invalid selection was specified
      // show the menu items in their DEFAULT state
      }
    }
End Sub

我不完全确定如何在 Javascript 中调用/执行该函数

好吧，我只能为我来自 VB 背景的弱 Java 技能道歉，

但我希望你明白我的意思，它可以帮助你解决你的问题。