WebパーツページにCSS IDセレクタを適用する方法

Question

CEWPリンクHTMLファイルを使用して、他のWebパーツページへのリンクのメニューを生成しています。リンクされた各ページのCEWPでこの同じファイルを使用したいです。ユーザーの場所のインジケータとして、私は現在のページのリンクをメニューの他のリンクとは異なる方法でスタイル化します。

私の理解は、親の子孫セレクタを使用して、現在のページのリンクのスタイルを定義するためのCSSルールを作成することができます。つまり、Pageのid="Home"とLinkのclass="Home"では、#Home .Home{font-weight:bold;}が必要なのかを取得する必要があります。< / P>

Webパーツページの親要素にIDを割り当てることができなければならないことを考えているので、その中のすべてのコンテンツは要素の「子」で、宣言で対処できます。 ASPXページのどの要素がIDを適用する必要があるか疑問に思います。あるいは、私のASPXページにすでに私がスタイリングのために対処できるIDをすでに持っていますか？

私はこの問題に様々な方向から来ることを実感し、他の方法に開いています。また、施設の矛盾したロックダウンの設置を行う立場にありますが、私が欲しいものを学ぶのが私の目標への「ベストプラクティス」の道を学ぶなら、私はホワイトコートでチームを要求することができますソリューションを実装することができます。

Answer 1

I would recommend to avoid using id for just css styling, especially such a general word as #current. Use a class instead: .current-page or something like that.

SharePoint renders classes and id for a current menu item in the server side. In your CEWP you don't have access to server side. One possible solution is to use an attribute selector with jQuery. Suppose you have a wrap div in your menu with class .my-cewp-menu.

$('.my-cewp-menu').find("a[href='currenHref']").addClass("current-page");

This has to be run when DOM is loaded. You can get the current page url (href) through javascript.

(function($) {
    $(document).on({
        ready: function() {
            var href = window.location.href;
            $('.my-cewp-menu').find("a[href='" + href + "']").addClass("current-page")
        }
    });
})(jQuery);

This code is just a simple example. It doesn't take possible window.location.hash (# in url) or possible relative urls (/subsite/my-page.aspx, or some-page.aspx) into account.

Answer 2

This is more of a general HTML/CSS question (except for the fact that you are using CEWP), however, while you are still here why don't you Export the CEWP and simply use a selector (e.g. id="current") and define that with the style for the active one, while changing which of the elements have the #current added on each page.

On the other hand the top navigation bar of SharePoint (based on ASP.NET Menu control) does this already.

Answer 3

Please know that I have selected Anatoly's answer, and only provided as an alternate method in the event such is needed...

My implementation of SP uses <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server"></asp:Content> on Webpart pages to surround the <table> containing the <WebPartPages:WebPartZone/> tags. I can target the content of everything placed in webparts on a Webpart page (like my menu code) by adding classes and/or IDs to this table tag:

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
 <table class="Class1 Class2" id="Home">
  <tr><td><WebPartPages:WebPartZone/></td></tr>
 </table>
</asp:Content>

The elements in the CEWP containing my menu code are children of the ASPX page's <table ID="Home"> element. By assigning classes to each menu link corresponding to their target page, I can style them as the "current" link based on the current ASPX page's <table> ID.

An example of the selector & declaration, and rendered source code:

From the stylesheet linked in the ASPX page...

#Home .Home{font-style:italic;}

From the table on the ASPX page...

<table id="Home">

<!--CEWP's HTML-->
    <ul>
     <li>
      <a href="http://website.com" class="Home">Home</a>
     </li>
    </ul>
<!--End CEWP-->

</table>