0

我有一个任务要做水平菜单。这里我的菜单选择有问题。这是我的代码。但是刷新页面后，所选菜单会消失。我该如何解决这个问题？

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style>
  .menu{width: 300px; height: 25; font-size: 18px;}
  .menu li{list-style: none; float: left; margin-right: 4px; padding: 5px;}
  .menu li:hover, .menu li.active {
        background-color: #f90;
    }
</style>

<ul class="menu">
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>

<script type="text/javascript">

var make_button_active = function()
{
    var siblings =($(this).siblings());

    siblings.each(function (index)
    {
      $(this).removeClass('active');
    }
  )


    $(this).addClass('active');
}

$(document).ready(
  function()
  {
    $(".menu li").click(make_button_active);
  }  
)

</script>
4

2 回答 2

0

当页面刷新时，整个页面是redrwan。您需要使用 cookie 或会话来存储它们。 本地存储。 您可以使用 HTML5 本地存储。

var yourObj= { 'key': 1, 'key2': 2, 'key3': 3 };

localStorage.setItem('yourObj', JSON.stringify(yourObj));

var getStoredObj= localStorage.getItem('yourObj');
于 2013-04-02T04:36:48.560 回答
0

我能想到的几种方法。

您还没有指定是否使用 MVC，所以如果您使用了，那么您可以简单地用部分视图替换屏幕的更新部分，无需再发生任何事情。

但是，如果您要返回整个页面并且拥有 sessionState，那么您需要将隐藏字段的值设置为单击的菜单的 ID。

然后在重建页面时，您应该仍然拥有会话状态下的隐藏字段值，获取该值并启用该菜单项。

如果您被允许拥有 cookie，则将其中一个设置为菜单的 id，并在页面构建后再次突出显示该菜单。

编辑

        $(".menuSomeMenu").click(function () {
            $.ajax({
                data: {
                    menuClicked: 'the menu clicked for the backend to use
                },
                url: "/Home/Ajax_MenuClickEvent",
                type: 'POST',
                success: function (data) {
                    $(".MyPartialViewContainer").html(data);
                }
            });
        });

然后在你的控制器中；

public ActionResult Ajax_MenuClickEvent(Guid StoreId)
{
    return PartialView("MyPartialView", modelToPassToPartialView);
}
于 2013-04-02T04:38:48.360 回答