it-swarm.com.de

Wie man HTML-Elementattribute ändert

Meine Masterseite enthält eine Liste wie hier gezeigt. Was ich jedoch tun möchte, ist das "class = active" -Attribut zu dem derzeit aktiven list li hinzuzufügen, aber ich habe keine Ahnung, wie ich das machen soll. Ich weiß, dass der Code in das page_load -Ereignis der Aspx-Seite geht, aber keine Ahnung, wie auf das Li zugegriffen werden muss, um das Attribut hinzuzufügen. Bitte erleuchte mich. Danke vielmals.

<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>
17
Vince Panuccio

Um auf diese Steuerelemente vom Server aus zuzugreifen, müssen Sie sie runat = "server" machen.

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

im Code hinter:

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");
   }
}
27
Ben Scheirman

Mit dem folgenden Code können Sie ein benanntes Steuerelement an einer beliebigen Stelle in der Steuerelementhierarchie suchen:

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;
}

Du könntest also so etwas tun:

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

Vergessen Sie vorher zu erwähnen, dass Sie runat = "server" für jedes Steuerelement benötigen, das Sie auf diese Weise finden möchten =)

4
Rob

Fügen Sie runat = "server" für die li-Tags in der Masterseite hinzu, und fügen Sie dies dem entsprechenden page_load -Ereignis hinzu, um die "aktive" Klasse zum li in der Masterseite hinzuzufügen

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

2
Bevan

Sie können ein Client-Skript wie folgt registrieren:

(setze id auf die id des li, den du auf active setzen möchtest)

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

Dies generiert einen JavaScript-Aufruf auf der Seite am unteren Rand, nachdem Elemente bereits gerendert wurden.

1
Lou Franco

Alle Teile wurden bereits in den vorherigen Antworten bereitgestellt. Um das Ganze jedoch zusammenzustellen, müssen Sie Folgendes tun:

  • Fügen Sie das runat = "server" -Attribut zu den <ul>- und <li>-Elementen hinzu.
  • Fügen Sie eine öffentliche Methode hinzu, um die Arbeit auf der Masterseite auszuführen, die von den Seiten mit der Masterseite aufgerufen werden kann.
  • Rufen Sie die Methode aus dem PageLoad der Seiten auf

    Alternativ können Sie den Code auch der OnLoad (...) -Methode der Masterseite hinzufügen, sodass Sie den Methodenaufruf nicht auf jeder Seite zur PageLoad hinzufügen müssen.

  • 1
    csgero

    Wenn sie runat = server wären, könnten Sie die Attribute-Eigenschaft verwenden.

    0
    Adam Naylor

    Um dieses bestimmte Steuerelement zu finden, muss es als public definiert werden (im generierten Designer).

    Oder müssen von einem öffentlichen get in den Codebehind gehüllt werden.

    0
    Adam Naylor

    Sie können die LIs auf der Masterseite für alle Inhaltsseiten verfügbar machen, indem Sie sie in den Eigenschaften der Masterseite einbetten.

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

    Dann auf der Inhaltsseite:

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

    Wenn ich das richtig verstanden habe!

    0
    Adam Naylor

    Danke für die Lösung.

    Mininisierter Code.

    Die Masterseitensteuerung kann auch in der untergeordneten Seite gefunden werden.

    ich meine Masterseite enthält HTML-Control

    und chilld page kann die Masterseite html conrol auf diese Weise finden

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

    Versuchen Sie dieses Das großartige Beispiel für die zukünftige Verwendung. Ich weiß, dass dieser Thread alt ist, aber für zukünftige Fragen ...

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

    0
    sus2bhai

    Ich habe einen Link gefunden, der mit CSS funktioniert und nur das Klassenattribut des body-Tags ändert. Das heißt, es gibt kein Javascript und es gibt keine für Schleifen oder irgendetwas.

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

    Lesen Sie hier mehr http://www.websiteoptimization.com/speed/Tweak/current/

    0
    Vince Panuccio