更新

Question

我有可展开的菜单，您可以在this link ..

中查看代码

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

感谢您的帮助。

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保存在本地存储中，并假设页面重新加载。

因此，当您的页面加载时，您将需要调用执行菜单动画或滑动的子程序，并根据本地存储的所选menuitem值传递相关值。

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技能道歉，

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

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

1 个答案:

更新