C# - 如何更改 HTML 元素的属性答案

【问题标题】：C# - How to change HTML elements attributesC# - 如何更改 HTML 元素的属性
【发布时间】：2010-09-16 06:14:50
【问题描述】：

我的母版页包含一个列表，如下所示。不过，我想做的是将“class=active”属性添加到当前活动的列表中，但我不知道该怎么做。我知道代码在 aspx 页面的 page_load 事件中，但不知道如何访问我需要添加属性的 li。请赐教。非常感谢。

<div id="menu">
  <ul id="nav">
    <li class="forcePadding"><img src="css/site-style-images/menu_corner_right.jpg" /></li>               
    <li id="screenshots"><a href="screenshots.aspx" title="Screenshots">Screenshots</a></li>
    <li id="future"><a href="future.aspx" title="Future">Future</a></li>
    <li id="news"><a href="news.aspx" title="News">News</a></li>
    <li id="download"><a href="download.aspx" title="Download">Download</a></li>
    <li id="home"><a href="index.aspx" title="Home">Home</a></li>
    <li class="forcePadding"><img src="css/site-style-images/menu_corner_left.jpg" /></li>
  </ul>
</div>

【问题讨论】：

标签： c# html asp.net

【解决方案1】：

为了从服务器端访问这些控件，您需要让它们 runat="server"

<ul id="nav" runat="server">
  <li class="forcePadding"><img src="css/site-style-images/menu_corner_right.jpg" /></li>               
  <li id="screenshots"><a href="screenshots.aspx" title="Screenshots">Screenshots</a></li>
  <li id="future"><a href="future.aspx" title="Future">Future</a></li>
  <li id="news"><a href="news.aspx" title="News">News</a></li>
  <li id="download"><a href="download.aspx" title="Download">Download</a></li>
  <li id="home"><a href="index.aspx" title="Home">Home</a></li>
  <li class="forcePadding"><img src="css/site-style-images/menu_corner_left.jpg" /></li>
</ul>

在代码隐藏中：

foreach(Control ctrl in nav.controls)
{
   if(!ctrl is HtmlAnchor)
   {
      string url = ((HtmlAnchor)ctrl).Href;
      if(url == GetCurrentPage())  // <-- you'd need to write that
         ctrl.Parent.Attributes.Add("class", "active");
   }
}

【讨论】：

后面的代码是指母版页还是内容页？

【解决方案2】：

以下代码可用于在控件层次结构中的任何位置查找命名控件：

public static Control FindControlRecursive(Control rootControl, string id)
{
    if (rootControl != null)
    {
        if (rootControl.ID == id)
        {
            return rootControl;
        }

        for (int i = 0; i < rootControl.Controls.Count; i++)
        {
            Control child;

            if ((child = FindControlRecursive(rootControl.Controls[i], id)) != null)
            {
                return child;
            }
        }
    }

    return null;
}

所以你可以这样做：

Control foundControl= FindControlRecursive(Page.Master, "theIdOfTheControlYouWantToFind");
((HtmlControl)foundControl).Attributes.Add("class", "active");

之前忘了提一下，您确实需要 runat="server" 在您希望以这种方式找到的任何控件上 =)

【讨论】：

【解决方案3】：

在母版页的 li 标记上添加 runat="server"，然后将其添加到适当的 page_load 事件中，以将“活动”类添加到母版页中的 li

HtmlGenericControl li = HtmlGenericControl)Page.Master.FindControl("screenshots"); li.Attributes.Add("class", "active");

【讨论】：

【解决方案4】：

你可以像这样注册一个客户端脚本：

（将 id 设置为要设置为活动的 li 的 id）

ClientScript.RegisterStartupScript(this.GetType(), "setActiveLI", "document.getElementById(\""+id+"\").setAttribute(\"class\", \"active\");", true);

这会在元素已经呈现后在靠近底部的页面上生成一个 JavaScript 调用。

【讨论】：

【解决方案5】：

之前的答案中已经提供了所有部分，但是要将整个内容放在一起，您需要：

将 runat="server" 属性添加到 <ul> 和 <li> 元素

添加一个公共方法来完成母版页上的工作，可以从使用母版页的页面调用

从页面的Page_Load调用方法

或者，您也可以将代码添加到母版页的 OnLoad(...) 方法，这样您就不必在每个页面上都将方法调用添加到 Page_Load。

【讨论】：

【解决方案6】：

如果它们是 runat=server，您可以使用 attributes 属性。

【讨论】：

【解决方案7】：

为了找到该特定控件，需要将其定义为公共（在生成的设计器中）

或者需要在代码隐藏中通过公共获取进行包装。

【讨论】：

【解决方案8】：

您可以通过将母版页上的 li 包装在母版页上的属性中来将母版页上的 li 公开给任何内容页：

public GenericHtmlControl Li1
{
    get
    {
        return this.LiWhatever;
    }
}

然后在内容页面上：

MasterPage2 asd = ((MasterPage2)Page.Master).Li1.Attributes.Add("class", "bla");

如果我猜对了！

【讨论】：

【解决方案9】：

我找到了一个使用 CSS 工作的链接，并且只涉及更改 body 标签的 class 属性。这意味着没有 Javascript，也没有 for 循环或任何东西。

#navbar a:hover,
  .articles #navbar #articles a,
  .topics #navbar #topics a,
  .about #navbar #about a,
  .contact #navbar #contact a,
  .contribute #navbar #contribute a,
  .feed #navbar #feed a {
 background: url(/pix/navbarlinkbg.gif) top left repeat-x; color: #555;
}

....

<body class="articles" onload="">

<ul id="navbar">
  <li id="articles"><a href="/articles/" title="Articles">Articles</a></li>
  <li id="topics"><a href="/topics/" title="Topics">Topics</a></li>
  <li id="about"><a href="/about/" title="About">About</a></li>
  <li id="contact"><a href="/contact/" title="Contact">Contact</a></li>
  <li id="contribute"><a href="/contribute/" title="Contribute">Contribute</a></li>
  <li id="feed"><a href="/feed/" title="Feed">Feed</a></li>
</ul>

【讨论】：

【解决方案10】：

试试这个未来使用的好例子。我知道这个帖子很旧，但为了将来的查询......

http://community.discountasp.net/showthread.php?p=33271

【讨论】：

【解决方案11】：

感谢您的解决方案。

最小化代码。

母版页控件也可以在子页中找到..

我的意思是母版页包含 html 控件

和chilld页面可以像这样找到母版页html控制

((HtmlControl)this.Master.FindControl("dpohome1")).Attributes.Add("class", "on");

【讨论】：

【解决方案12】：

简单的逻辑和最少的代码，我通常使用下面的代码，尤其是在动态菜单中。希望这会有所帮助。

在母版页后面的代码中创建此方法代码

代码隐藏 (C#)

protected string SetCssClass(string page) { return Request.Url.AbsolutePath.ToLower().EndsWith(page.ToLower()) ? "active" : ""; }

在您创建的菜单列表项中调用此方法传递页面名称，如下所示

HTML 页面（ASPX 内联代码）

<li id="screenshots" class = "<%= SetCssClass("screenshots.aspx") %>"> <a href="screenshots.aspx" title="Screenshots">Screenshots</a></li>

<li id="future" class = "<%= SetCssClass("future.aspx") %>"> <a href="future.aspx" title="Future">Future</a></li>

等等。

通过这种方法，每次添加页面和链接时，您不必在每个页面中都编写代码。就在您在母版页中添加链接时，每个<li> 调用SetCssClass(pagename) 方法调用来设置类就完成了。（您可以根据自己的喜好重命名方法。

如果您按代码行付费，您可以使用更长的代码 bcoz 那么这只是一行代码。（哈哈）。开玩笑。希望对您有所帮助。

注意：我忽略了 html 代码的其他部分，你也可以包含它们，这样就可以了。

【讨论】：