javascript - 跨页面更改选定的菜单项类

Question

对于我的网站元素，我使用的是 ASP.NET MVC“Razor”。边走边学。

我的网站上有 5 或 6 个页面，其中一个页面在另一个网站上。我希望用户感觉他们在为所有人使用同一个站点。

页面有一个典型的 HTML 菜单，它遵循使用 XHTML 无序列表和 CSS 进行布局的标准模式:

<ul id="menu">
    <li class="selected"><a href="@Href("~/")">Home</a></li>
    <li><a href="http://ceklog.kindel.com">cek.log</a></li>
    <li><a href="@Href("~/Services")">Services</a></li>
    <li><a href="@Href("~/Charlie")">Charlie's Stuff</a></li>
    <li><a href="@Href("~/Contact.cshtml")">Contact</a></li>
</ul>

在 SO 的其他地方，我发现了与我类似的问题，人们希望在动态页面中跟踪所选菜单项。例如:

Javascript Changing the selected Menu items class

但这种方法在我的情况下不起作用，因为在我的情况下，用户没有更改一个页面上的选择，而是完全导航到另一个页面。

如何做到这一点？

Answer 1

...我想通了。

我使用 Razor 在服务器端实现了这一点。

首先，我在我的 _SiteLayout.cshtml 页面(所有页面使用的模板)上实现了一个函数:

@functions {
    public string Selected(string PageTitle) {
       if (Page.Title == PageTitle)
          return "selected";
        else
          return "";
    }
}

然后我在列表中使用了这个函数:

<ul id="menu">
    <li class="@Selected("Home")"><a href="@Href("~/")">Home</a></li>
    <li class="@Selected("cek.log")"><a href="http://ceklog.kindel.com">cek.log</a></li>
    <li class="@Selected("Services")"><a href="@Href("~/Services")">Services</a></li>
    <li class="@Selected("Charlie's Stuff")"><a href="@Href("~/Charlie")">Charlie's Stuff</a></li>
    <li class="@Selected("Contact")"><a href="@Href("~/Contact.cshtml")">Contact</a></li>
</ul>

完美运行。在我的外部页面上，我只是手动编码它，因为它基于 Wordpress 而不是 Razor。