跨页面更改所选菜单项类

Changing the selected Menu items class across pages

本文关键字：菜单项      更新时间：2023-09-26

对于我的网站项目，我使用ASP。. NET MVC"剃刀"。边走边学

我的网站上有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的其他地方，我发现了类似于我的问题，人们想要跟踪所选菜单项，但在动态页面中。例如:

修改选中的菜单项class

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

如何做到这一点?

…我想明白了

我使用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。

相关文章：