Question

开发垂直导航Web应用程序。当我单击超链接（出现在母版页中）时，会加载子.aspx页面，但由于它是新页面加载，因此设置了超链接的默认颜色。我想为加载的相应页面的超链接设置不同的颜色。

母版页代码：

<header id="leftpanel">
    <ul>
        <li><a href="Default.aspx">Home</a></li><br />
        <li><a href="Default2.aspx">About Us</a></li><br />
        <li><a href="Default3.aspx">Tourism</a></li><br />
        <li><a href="Default4.aspx">Enquiry</a></li><br />
    </ul>
</header>

    <div id="mainpanel"> 
        <asp:Label ID="lblTitle" runat="server" Text="MAIN TITLE"></asp:Label>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>

代码的CSS：

body {
  top:0;
  left:0;
  margin:0;
}

#leftpanel{
 position:fixed;
 left:0;
 width:25%;
 float: left;
 height:100%;
 background-color: gray;
 text-align:center;
 padding-top:250px;
}
ul, li{
 padding:0;
 margin:0;
 list-style:none;
}

#leftpanel ul li{
 font-size:15px;
 line-height:15px;
 letter-spacing:3px;
 color:white;
 margin-bottom:20px;
 -webkit-font-smoothing:antialiased;
 -webkit-transition:color 0.3s ease-out;
 font: 20px/1.4em "PT Sans Narrow", "Arial", sans-serif;
}

#leftpanel ul li a{
 color:white;
 -webkit-transition:color 0.3s ease-out;
 -moz-transition:color 0.3s ease-out;
 -o-transition:color 0.3s ease-out;
 -ms-transition: color 0.3s ease-out;
 transition:color 0.3s ease-out;
 font-weight:bold;
 text-decoration:none;
 background-color:gray;
 cursor:pointer;
}

#leftpanel ul li:hover, #leftpanel ul li a:hover , #leftpanel ul li.current{
 color:#0fe9bd;
 -webkit-transition:color 0.3s ease-out;
 -moz-transition:color 0.3s ease-out;
 -o-transition:color 0.3s ease-out;
 -ms-transition: color 0.3s ease-out;
 transition:color 0.3s ease-out;
 cursor:pointer;
}  

#leftpanel a:hover, #leftpanel .active{
 color:#0fe9bd;
 font:x-large
}

#mainpanel{
 position:fixed;
 width:75%;
 float:left;
 left:25%;
 height:100%;
 text-align:center;
 align-items:center;
 background-color:#0fe9bd;
 color:black;
 font-weight:bold;
 font: 20px/1.4em "PT Sans Narrow", "Arial", sans-serif;
}

另外，如果我将更新面板放在母版页的内容占位符中，如何在点击超链接时将子页面加载到更新面板中，而不是重新加载整个页面？

Answer 1

创建li或a服务器端，然后在子页面上找到并设置背景颜色

母版页代码：

<header id="leftpanel">
    <ul>
        <li><a href="Default.aspx" id="home" runat="server">Home</a></li><br />
        <li><a href="Default2.aspx">About Us</a></li><br />
        <li><a href="Default3.aspx">Tourism</a></li><br />
        <li><a href="Default4.aspx">Enquiry</a></li><br />
    </ul>
</header>

    <div id="mainpanel"> 
        <asp:Label ID="lblTitle" runat="server" Text="MAIN TITLE"></asp:Label>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>

子页面代码

protected void Page_Load(object sender, EventArgs e)
        {
    HtmlAnchor b = (HtmlAnchor)this.Page.Master.FindControl("home");
                b.Attributes["class"] = "active";
        }

Answer 2

您可以使用a:active and a:visited 如果您希望突出显示与当前页面对应的链接，则

.currentPage { color: Aqua; background-color: #000000; }

将此课程添加到相应的<li>。希望这会对你有帮助..

如何在asp.net中从子窗体更改母版页中的控件属性

2 个答案: