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

ページを更新すると、ページ全体が再描画されます。それらを保存するには、Cookie またはセッションを使用する必要があります。 ローカルストレージ。 HTML5 LocalStorage を使用できます。

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 の使用が許可されている場合は、そのうちの 1 つをメニューの 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 に答える