Question

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

<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>

Answer 1

页面刷新时，整页都是redrwan。你需要使用cookie或会话来存储它们。 LocalStorage. 您可以使用HTML5 LocalStorage。

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

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

var getStoredObj= localStorage.getItem('yourObj');

Answer 2

我能想到的几种方式。

您尚未指定是否使用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); }

如何在页面刷新后突出显示所选菜单

2 个答案: