Как применить селектор идентификатора CSS к странице веб-части?

sharepoint.stackexchange https://sharepoint.stackexchange.com//questions/57563

Вопрос

Я использую 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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с sharepoint.stackexchange
scroll top