Question

有人知道如何以编程方式更改子页面母版页中链接的ccs吗？

例如，我的主页中有一个（导航）链接列表，如下所示：

    <div class="list-group">
        <a href="report.aspx" class="list-group-item active">Donuts&trade;</a>
        <a href="english_responses.aspx" class="list-group-item">English responses</a>
        <a href="irish_responses.aspx" class="list-group-item">Irish responses</a>
    </div>

在导航列表中，我使用css class：list-group-item active来显示活动链接（活动时为蓝色）和css class：list-group-item用于普通链接。

我想要的是使用c＃以编程方式更改每个子页面的活动链接。

使用page_load有什么办法吗？

Answer 1

你几乎没有选择：

将runat="server添加到您的锚标记
使用HyperLink控件

<强> ASP：

<asp:HyperLink ID ="ReportHyperLink" 
               NavigateUrl ="report.aspx" 
               CssClass="list-group-item" runat="server" />

代码背后：

ReportHyperLink.CssClass= "list-group-item active";

如果在主页“子”页面中使用
，似乎无法使代码落后

你只需要找到控件

<强> ASP：

<asp:ContentPlaceHolder ID="cpHolder" runat="server">              
<asp:HyperLink ID ="ReportHyperLink" 
               NavigateUrl ="report.aspx" 
               CssClass="list-group-item" runat="server" />
</asp:ContentPlaceHolder>

代码背后：

ContentPlaceHolder cp = (ContentPlaceHolder)this.Master.FindControl("CpHolder");
HyperLink hp= (HyperLink)cp.FindControl("ReportHyperLink");
hp.CssClass= "list-group-item active";

另一种更好的方法是，您可以在母版页中添加公共属性，如下所示：

主要代码背后：

public string ReportHyperLinkCssClass
{
    get {
        return this.ReportHyperLink.CssClass;
    }
    set {
        this.ReportHyperLink.CssClass= value;
    }
}

页面加载代码

var myMaster = this.Master as YourMasterType;
if(myMaster != null)
{
    myMaster.ReportHyperLinkCssClass = newCssClass;
}

Answer 2

除了页面加载事件，您还可以使用 JQuery 执行相同的操作。

请参阅下面的jquery代码示例：

$(document).ready(function() {
    var childerns = $('.list-group').children('a');

    for (var i = 0; i < childerns.length; i++) {
        if ($(childerns[i]).attr('href') == 'english_responses.aspx') {
            $(childerns[i]).attr('class', 'list-group-item active');
        }
    }
});

在上面的代码中，我将css从 list-group-item 更改为 list-group-item active ，用于 href =“english_responses的锚标记。 aspx“

Answer 3

使用普通的javascript或jquery比使用服务器端c＃更简单，更快，但是如果你绝对必须像meda所说的那样，在你的锚标签上添加一个“runat ='server'”（更好的是使用超链接控件），让您从服务器访问控件并将Style属性更改为您的优先。

但我绝对建议使用javascript。

使用css和c＃在母版页中以编程方式更改链接

3 个答案: