页面重新加载后，在导航栏中保留所选项目

Question

如何保留选定/有效的导航栏项目，以便在重新加载页面后重新选择它？

我正在使用bootstrap，但我不认为这是特别相关的。我相信我想要在点击上存储所选项目，然后在页面上加载重新选择该项目。但是我该怎么做？我看到的大部分内容都是基于项目的href参数，但在某些地方我使用的是ActionLink。

为了使它复杂化我还有三个导航栏（如果你愿意，还有一个菜单，子菜单和子子菜单），所以我想在每一个中保留所选项目（并设置一个默认项目。同样如果我选择菜单中的项目和项目应自动选择其子菜单中的默认（第一个）项目。

<nav class="navbar navbar-inverse fixed-top">
    <div class="container-fluid">
        <ul class="nav navbar-nav">
            <li><a href="/Controller1/Index/">Menu Item 1</a>)</li>
            <li><a href="/Controller2/Index/">Menu Item 2</a>)</li>
            <li><a href="/Controller3/Index/">Menu Item 3</a>)</li>
        </ul>
    </div>
</nav>

if (IsSectionDefined("SubMenu"))
{
    <nav class="navbar navbar-inverse fixed-top">
        <div class="container-fluid">
            <ul class="nav navbar-nav">
                @RenderSection("SubMenu")
            </ul>
       </div>
    </nav>
}

if (IsSectionDefined("SubSubMenu"))
{
    <nav class="navbar navbar-inverse fixed-top">
        <div class="container-fluid">
            <ul class="nav navbar-nav">
                @RenderSection("SubSubMenu")
            </ul>
        </div>
    </nav>
}

<script>
    $(document).ready(function (e) {
        $(".navbar li a").click(function () {
            $(".navbar li a").removeClass("selected");
            $(this).addClass("selected");
        });
    });
</script>

子菜单的一个例子是：

@section SubMenu {
    <li><a href="/SubMenu1/">SubMenu Item 1</a>)</li>
    <li><a href="/SubMenu2/">SubMenu Item 2</a>)</li>
    <li><a href="/SubMenu3/">SubMenu Item 3</a>)</li>
}

@section SubSubMenu {
    <li><a href="/SubSubMenu1/">SubSubMenu Item 1</a>)</li>
    <li><a href="/SubSubMenu2/">SubSubMenu Item 2</a>)</li>
    <li><a href="/SubSubMenu3/">SubSubMenu Item 3</a>)</li>
}