Question

我的母版页包含一个列表，如下所示。我想做的是将“class = active”属性添加到当前活动的列表li但我不知道如何执行此操作。我知道代码进入了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>

Answer 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");
   }
}

Answer 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”在你希望能够以这种方式找到的任何控件上=）

Answer 3

在母版页的li标签上添加runat =“server”，然后将其添加到相应的page_load事件中，将“有效”类添加到母版页中的li

HtmlGenericControl li = HtmlGenericControl）Page.Master.FindControl（“screenshots”）; li.Attributes.Add（“class”，“active”）;

Answer 4

您可以注册这样的客户端脚本：

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

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

在元素已经渲染之后，这将在靠近底部的页面上生成一个JavaScript调用。

Answer 5

以前的答案中已经提供了所有部件，但要将整个部件放在一起，您需要：

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

添加一个公共方法，在母版页上进行工作，可以使用母版页从页面调用

从

页面的Page_Load调用该方法

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

Answer 6

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

Answer 7

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

或者需要被代码隐藏中的公众所包围。

Answer 8

您可以将主页上的li暴露给任何内容页面，方法是将它们包装在母版页的属性中：

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

然后在内容页面上：

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

如果我做对了！

Answer 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>

在这里阅读更多内容 http://www.websiteoptimization.com/speed/tweak/current/

Answer 10

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

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

Answer 11

感谢您的解决方案。

最小化代码。

主页面控件也可以在子页面中找到..

我的意思是母版页包含html contol

和chilld页面可以找到像这样的主页html conrol

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

Answer 12

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

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

代码隐藏（C＃）

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

在您创建的菜单列表项中，调用此方法以传递这样的页面名称

HTML PAGE（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代码的其他部分，您也可以包括它们，这会很好地工作。

C＃ - 如何更改HTML元素属性

12 个答案: