Как применить селектор идентификатора CSS к странице веб-части?
-
10-12-2019 - |
Вопрос
Я использую HTML-файл, связанный с CEWP, для создания меню ссылок на другие страницы веб-частей.Я хочу использовать этот же файл в CEWP на каждой из связанных страниц.В качестве индикатора местоположения пользователя я хочу оформить ссылку текущей страницы иначе, чем другие ссылки в меню.
Насколько я понимаю, я могу создать правило CSS, определяющее стиль для ссылки текущей страницы, используя селектор родительского-потомка, т. е. если страница id="Home"
и ссылка class="Home"
, затем #Home .Home{font-weight:bold;}
должен дать мне то, что мне нужно.
Я думаю, что у меня должна быть возможность назначить идентификатор родительскому элементу на странице веб-части, чтобы все содержимое в нем было «дочерним» элементом и могло быть указано в объявлении.Мне интересно, к какому элементу на странице ASPX мне следует применить идентификатор.В качестве альтернативы, будет ли моя страница ASPX уже иметь идентификатор, к которому я могу обратиться для стилизации?
Я понимаю, что могу подойти к этому вопросу с нетрадиционной стороны, и я открыт для других методов.Кроме того, я могу заставить непоследовательно заблокированную установку Foundation делать то, что я хочу, но если я узнаю, что существует «лучший практический» путь к моей цели, я могу попросить команду в белых халатах реализовать решение. .
Решение
Я бы рекомендовал избегать использования id только для оформления CSS, особенно такого общего слова, как #current
.Вместо этого используйте класс: .current-page
или что-то вроде того.
SharePoint отображает классы и идентификатор текущего пункта меню на стороне сервера.В вашем CEWP у вас нет доступа к серверной части.Одним из возможных решений является использование селектора атрибутов с jQuery.Предположим, у вас в меню есть обертка div с классом .my-cewp-menu
.
$('.my-cewp-menu').find("a[href='currenHref']").addClass("current-page");
Это необходимо запускать при загрузке DOM.Вы можете получить URL-адрес текущей страницы (href) через JavaScript.
(function($) {
$(document).on({
ready: function() {
var href = window.location.href;
$('.my-cewp-menu').find("a[href='" + href + "']").addClass("current-page")
}
});
})(jQuery);
Этот код представляет собой простой пример.Он не учитывает возможные window.location.hash (# в URL-адресе) или возможные относительные URL-адреса (/subsite/my-page.aspx или some-page.aspx).
Другие советы
Это скорее общий вопрос по HTML/CSS (за исключением того факта, что вы используете CEWP), однако, пока вы все еще здесь, почему бы вам не экспортировать CEWP и просто не использовать селектор (например,id="current") и определите его со стилем активного, изменяя при этом, к какому из элементов добавляется #current на каждой странице.
С другой стороны, верхняя панель навигации SharePoint (на основе элемента управления ASP.NET Menu) уже делает это.
Обратите внимание, что я выбрал ответ Анатолия и предоставил его только в качестве альтернативного метода в случае необходимости...
Моя реализация SP использует <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server"></asp:Content>
на страницах веб-части, чтобы окружить <table>
содержащий <WebPartPages:WebPartZone/>
теги.Я могу настроить таргетинг на содержимое всего, что размещено в веб-частях на странице веб-части (например, код моего меню), добавив к этому классы и/или идентификаторы. table
ярлык:
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<table class="Class1 Class2" id="Home">
<tr><td><WebPartPages:WebPartZone/></td></tr>
</table>
</asp:Content>
Элементы CEWP, содержащие мой код меню, являются дочерними элементами страницы ASPX. <table ID="Home">
элемент.Назначая классы каждой ссылке меню, соответствующей их целевой странице, я могу стилизовать их как «текущую» ссылку на основе текущей страницы ASPX. <table>
ИДЕНТИФИКАТОР.
Пример селектора и объявления, а также отображаемый исходный код:
Из таблицы стилей, связанной на странице ASPX...
#Home .Home{font-style:italic;}
Из таблицы на странице ASPX...
<table id="Home">
<!--CEWP's HTML-->
<ul>
<li>
<a href="http://website.com" class="Home">Home</a>
</li>
</ul>
<!--End CEWP-->
</table>