Question

如果在Site.Master文件中我们有类似

的内容

<div id="menu-container">
    <ul id="menu">
        <li>
            <%: Html.ActionLink("Frontpage", "Index", "Home")%></li>
        <li>
            <%: Html.ActionLink("Content", "Index", "Content")%></li>
        <li>
            <%: Html.ActionLink("Winners", "Index", "Winners")%></li>
        <li>
            <%: Html.ActionLink("Users", "Index", "Users")%></li>
        <li>
            <%: Html.ActionLink("Statistics", "Index", "Statistics")%></li>
        <li>
            <%: Html.ActionLink("Help", "Help", "Home")%></li>
    </ul>
    <ul id="publish">
        <li>
            <%: Html.ActionLink("Preview", "Index", "Preview")%></li>
    </ul>
</div>

我们希望在每个内容页面中设置正确的class="selected"属性到右侧<li>最佳方式是什么？

目前我正在使用：

<% string url = Page.Request.Url.AbsoluteUri.ToString(); %>
<ul id="menu">
    <li <% if (url.Contains("/Home")) { Response.Write("class='selected'"); } %>>
        <%: Html.ActionLink("Frontpage", "Index", "Home")%></li>
    <li <% if (url.Contains("/Content")) { Response.Write("class='selected'"); } %>>
        <%: Html.ActionLink("Content", "Index", "Content")%></li>
    <li <% if (url.Contains("/Winners")) { Response.Write("class='selected'"); } %>>
        <%: Html.ActionLink("Winners", "Index", "Winners")%></li>
    <li <% if (url.Contains("/Users")) { Response.Write("class='selected'"); } %>>
        <%: Html.ActionLink("Users", "Index", "Users")%></li>
    <li <% if (url.Contains("/Statistics")) { Response.Write("class='selected'"); } %>>
        <%: Html.ActionLink("Statistics", "Index", "Statistics")%></li>
    <li <% if (url.Contains("/Home/Help")) { Response.Write("class='selected'"); } %>>
        <%: Html.ActionLink("Help", "Help", "Home")%></li>
</ul>

但我不认为这是最好的方法。

感谢您的帮助

Answer 1

我发现实现目标的最简单方法是在页面正文中添加一个类，以确定哪个页面是母版页中当前代码的最新页面。然后，在CSS中，您可以执行以下操作：

#menu li { /* Styles for unselected menu items */ }

body.home #menu li.home,
body.content #menu li.content,
body.winners #menu li.winners
{
    /* Styles for selected menu items */
}

这样，您还可以轻松添加与您正在查看的页面相关的其他显示逻辑。

修改

通过访问ASP.NET变量输出页面时，可以检测当前URL，因此如果在母版页中定义了菜单，则无关紧要。例如：

<% var convertedUrl = Request.Url.ToString().ToLower().Replace('/', '-'); %> <body class="<%= convertedUrl %>">  </body>

如果您在“关于/公司”网址上，这会将“约公司”这个课程放在您的身上。

Answer 2

你冷却将所有字符串放在列表对象（匿名或打字）中并循环。

然后你只需要一个LI代码块，但对于如此小的列表，可能会有很多。

另一个解决方案是使用jQuery客户端来设置它。在每个LI上添加与您要匹配的值相对应的ID或类，然后添加获取location.url的客户端脚本，或者如果不适用，则使用隐藏字段，其中存储了要匹配的URL。

将所选类添加到列表的最佳技术

2 个答案: