c# - asp.NET 4.0 + CSS 问题 : How to create a give a different effect for the current webpage on the menu?

Question

通常在创建静态网站时，不是通过 asp.NET，我有一个类，它具有当前/选定菜单项的样式。然后我会将它作为当前页面放在每个相关页面中。

现在我使用的是 asp.NET 并且模板是通过站点管理员处理的，因此无法完成。你会怎么做。这是我目前拥有的 CSS。

/* TAB MENU   
----------------------------------------------------------*/
div.hideSkiplink
{
   background-color:#3a4f63;
   width:100%;
}

div.menu
{ 
   padding: 4px 0px 4px 8px;
}

div.menu ul 
{
   list-style: none;
   margin: 0px;
   padding: 0px;
   width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
   background-color: #FFF; /*680840*/
   border: 1px #4e667d solid;
   height: 20px;
   width: 140px;
   color: #000; /*FFF*/
   display: block;
   line-height: 1.35em;
   padding: 4px 20px;
   text-decoration: none;
   white-space: nowrap;
}

div.menu ul li a:hover
{
   background-color: #680840;
   color: #FFF;
   text-decoration: none;
}

div.menu ul li a:active 
{
   background-color: #680840;
   color: #cfdbe6;
   text-decoration: none;
}

这是结果，在悬停时我有一个紫色背景(这也可以用作选定的颜色，即 a:hover 样式可以用于当链接代表当前页面时):

asp.NET 菜单:

                        <div id="menu">
            <h2>Dashboard</h2>
            <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Vertical" >
                <StaticSelectedStyle CssClass="selectedMenu" /> 
                <Items>
                    <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" ToolTip="Home"/>
                    <asp:MenuItem NavigateUrl="~/Imports.aspx" Text="Import"/>
                    <asp:MenuItem NavigateUrl="~/Submission.aspx" Text="Insert Submission"/>
                    <asp:MenuItem NavigateUrl="~/Reports.aspx" Text="Reports"/>
                    <asp:MenuItem NavigateUrl="~/CurrencyMaintenance.aspx" Text="Currency Maintenance" />
                    <asp:MenuItem NavigateUrl="~/Remittance.aspx" Text="Remittance" />
                </Items>
            </asp:Menu>
        </div>

CSS

/* TAB MENU   
----------------------------------------------------------*/
div.hideSkiplink
{
    background-color:#3a4f63;
    width:100%;
}

div.menu
{
   padding: 4px 0px 4px 8px;
}

div.menu ul
{
   list-style: none;
   margin: 0px;
   padding: 0px;
   width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
   background-color: #FFF; /*680840*/
   border: 1px #4e667d solid;
   height: 20px;
   width: 140px;
   color: #000; /*FFF*/
   display: block;
   line-height: 1.35em;
   padding: 4px 20px;
   text-decoration: none;
   white-space: nowrap;
}

div.menu ul li a:hover 
{
   background-color: #680840;
   color: #FFF;
   text-decoration: none;
}

.selectedMenu
{
   background-color: #680840;
   color: #FFF;
   text-decoration: none;
}

div.menu ul li a:active
{
   background-color: #680840;
   color: #cfdbe6;
   text-decoration: none;
}

paulGraffix 在我的一个结构更好的问题中回答了这个问题，答案可以在这里找到:asp.NET - Problems with Static Selected Style for a Selected Page on the menu

Answer 1

您可以在 Site.Master 的类上实现一个属性。示例:

public enum MenuItem
{
    Home,
    Import,
    InsertSubmission,
    Reports,
    CurrencyMaintenance,
    Remittance
}

public partial class MyMaster : System.Web.UI.MasterPage
{
    public MenuItem SelectedMenu { get; set; }
    protected void Page_Load(object sender, EventArgs e)
    {
        // You can either generate your entire menu from here or
        // you could just use the
        // <a href="Default.aspx" class='<%= this.SelectedMenu == MenuItem.Home ? "selected" : "" %>'>Home</a>
     }
}

现在在您的页面类中，您只需执行以下操作:

public partial class Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        var master = (this.Master as MyMaster);
        master.SelectedMenu = MenuItem.Home;
    }
}

---

编辑:如果您使用 <asp:menu>那么就更容易了，因为您可以使用 <staticselectedstyle> 设置样式标签，例如-

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Vertical">
    <StaticSelectedStyle CssClass="selectedMenu" />
    <Items>
        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
        <asp:MenuItem NavigateUrl="~/Imports.aspx" Text="Import"/>
        <asp:MenuItem NavigateUrl="~/Submission.aspx" Text="Insert Submission"/>
        <asp:MenuItem NavigateUrl="~/Reports.aspx" Text="Reports"/>
        <asp:MenuItem NavigateUrl="~/CurrencyMaintenance.aspx" Text="Currency Maintenance" />
        <asp:MenuItem NavigateUrl="~/Remittance.aspx" Text="Remittance" />
    </Items>
</asp:Menu>

检查 this link了解更多信息。