#c# #.net #css #menu #master-pages
#c# #.net #css #меню #мастер-страницы
Вопрос:
Я использую PHP уже 7 лет или около того, но с сегодняшнего дня я был вынужден использовать .СЕТЬ для проекта. Просто для вставки:
Этот проект включает:
.NET4 Viewstate = false
Теперь моя проблема заключается в следующем. Основной макет покрывается главной страницей, которая кажется совершенно очевидной, как это работает. Он также включает в себя параметры навигационного меню, такие как:
<div id="menu">
<ul>
<li><a href="default.aspx" title="Home" >Home</a></li>
<li><a href="products.aspx" title="Products">Products</a></li>
<li><a href="prices.aspx" title="Size amp;amp; Price">Size amp;amp; Price</a></li>
<li><a href="formats.aspx" title="File Formats">File Formats</a></li>
</ul>
</div>
Теперь, что я хотел бы сделать, это добавить атрибут класса CSS в зависимости от того, на какой странице я нахожусь, поэтому, если бы я был на странице продуктов, я бы получил следующий источник:
<div id="menu">
<ul>
<li><a href="default.aspx" title="Home" >Home</a></li>
<li><a href="products.aspx" class="active" title="Products">Products</a></li>
<li><a href="prices.aspx" title="Size amp;amp; Price">Size amp;amp; Price</a></li>
<li><a href="formats.aspx" title="File Formats">File Formats</a></li>
</ul>
</div>
Любая помощь была бы высоко оценена!
Приветствия 🙂
Ответ №1:
Для этого есть множество способов, один из которых — добавить скрипт на «подчиненную» страницу, который задает класс соответствующего тега.
<li><a href="default.aspx" title="Home" id="aHome" >Home</a></li>
<li><a href="products.aspx" title="Products" id="aProducts">Products</a></li>
Затем в products.aspx вы можете сделать:
<SCRIPT>document.getElementById('aProducts').setAttribute('class', 'active');</SCRIPT>
Комментарии:
1. Это отличное решение, спасибо. Я никогда даже не думал о решении на Javascript, поскольку обычно я стараюсь избегать их, но это прекрасно делает то, что мне нужно, хотя я бы предпочел, чтобы это было жестко запрограммировано, чтобы это работало нормально. Спасибо.
2. Нет проблем, все три ответа будут работать. Плюсом других является то, что все волшебство происходит на стороне сервера, они не полагаются на сценарии на стороне клиента.
Ответ №2:
Это не ответ на ваш вопрос, но это было в категории CSS, поэтому я решил, что, по крайней мере, прокомментирую 🙂
Я бы настоятельно рекомендовал вам установить статические классы для каждого элемента списка и в сочетании с основными классами в CSS использовать что-то вроде:
<style type="text/css"><!--
body.products #menu li.products a,
body.otherpage1 #menu li.otherpage1 a,
body.otherpage2 #menu li.otherpage2 a,
body.otherpage3 #menu li.otherpage3 a,
body.otherpage4 #menu li.otherpage4 a, { /* your styles here*/ }
--></style>
Я думаю, что использование C # для того, чтобы просто задать класс, немного излишне, вот и все 🙂
Комментарии:
1. Да, это хорошо, на самом деле я использовал этот подход, и на «подчиненной» странице, которая использует главную страницу, я добавляю другой стиль и селектор только для того элемента, который я хочу выглядеть по-другому. Это эффективно «переопределяет» предыдущий стиль.
2. @mikey Да, именно. Пока переопределяющий стиль следует за исходным стилем, нет смысла в !important , который сам по себе является мерзостью 🙂
Ответ №3:
Я бы начал с преобразования ссылок в серверные элементы управления. Смотрите страницу MSDN для <asp:HyperLink />. Оттуда я бы создал интерфейс для своей главной страницы, чтобы, если мне когда-нибудь понадобится изменить главные страницы в будущем, я мог реализовать тот же интерфейс и не беспокоиться о нарушении моей сборки (мы публично раскроем некоторые свойства на следующем шаге, так что это будет полезно).
public interface IMasterPage
{
String LnkHomeClass { get; set; }
String LnkProductsClass { get; set; }
...
}
Теперь, как я упоминал, предоставьте атрибут CssClass для ваших гиперссылок в коде вашей главной страницы.
public string LnkProductsClass
{
get
{
return LnkProducts.CssClass;
}
set
{
LnkProducts.CssClass = value;
}
}
Теперь вы можете установить их на своих дочерних страницах.
IMasterPage masterPage = Master as IMasterPage;
if (masterPage != null)
{
masterPage.LnkProductsClass = “active”;
}
Другим вариантом, но с которым я менее знаком, может быть использование вложенных мастер-страниц.