C# - Как изменить атрибуты HTML-элементов
Моя главная страница содержит список, как показано здесь. Что я хотел бы сделать, так это добавить атрибут «class = active» в список li, который сейчас активен, но я не знаю, как это сделать. Я знаю, что код находится в событии page_load страницы aspx, но не знаю, как получить доступ к 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>
Ответы 12
Если бы они были runat = server, вы могли бы использовать свойство attributes.
Вы можете зарегистрировать клиентский скрипт следующим образом:
(установите id равным идентификатору li, который вы хотите сделать активным)
ClientScript.RegisterStartupScript(this.GetType(), "setActiveLI", "document.getElementById(\""+id+"\").setAttribute(\"class\", \"active\");", true);
Это генерирует вызов JavaScript на странице внизу после того, как элементы уже были отрисованы.
Чтобы найти этот конкретный элемент управления, он должен быть определен как общедоступный (в сгенерированном дизайнере).
Или его нужно будет обернуть публичным get в коде.
Вы можете предоставить li на главной странице для любых страниц содержимого, заключив их в свойства на главной странице:
public GenericHtmlControl Li1
{
get
{
return this.LiWhatever;
}
}
Затем на странице содержимого:
MasterPage2 asd = ((MasterPage2)Page.Master).Li1.Attributes.Add("class", "bla");
Если я правильно понял!
Приведенный ниже код можно использовать для поиска именованного элемента управления в любом месте иерархии элементов управления:
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" на любом элементе управления, который вы хотите найти таким образом =)
Чтобы получить доступ к этим элементам управления со стороны сервера, вам необходимо сделать их 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");
}
}
Все части уже были предоставлены в предыдущих ответах, но чтобы собрать все вместе, вам необходимо:
<ul> и <li>В качестве альтернативы вы также можете добавить код к методу OnLoad (...) главной страницы, поэтому вам не нужно добавлять вызов метода в Page_Load на каждой странице.
Я нашел ссылку, которая работает с использованием CSS и включает только изменение атрибута class тега body. Это означает, что нет ни 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/
Добавьте runat = "server" в теги li на главной странице, затем добавьте это в соответствующее событие page_load, чтобы добавить 'активный' класс к li на главной странице.
HtmlGenericControl li = HtmlGenericControl) Page.Master.FindControl («снимки экрана»); li.Attributes.Add ("класс", "активный");
Попробуй это отличный пример для использования в будущем. Я знаю, что эта ветка устарела, но для будущих запросов ...
Спасибо за решение.
Мининизированный код.
Элемент управления главной страницы также можно найти на дочерней странице.
я имею в виду, что главная страница содержит html contol
и страница chilld может найти элемент управления html главной страницы, подобный этому
((HtmlControl)this.Master.FindControl("dpohome1")).Attributes.Add("class", "on");
Простая логика и минимальный код, я обычно использую следующий код, особенно в динамическом меню. Надеюсь это поможет.
Создайте этот код метода в коде за главной страницей
КОД СЗАДИ (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-кода, вы также можете включить их, это будет работать нормально.
Означает ли код позади главную страницу или страницу содержимого?