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>

在其他地方，我发现类似于我的问题，人们希望跟踪所选菜单项，但在动态页面内。例如：

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。

跨页面更改所选菜单项类

1 个答案: