Come posso applicare un selettore ID CSS a una pagina Web Part?

Question

Sto usando un file HTML collegato a CEWP per generare un menu di collegamenti ad altre pagine web-part. Voglio usare questo stesso file in un CEWP su ciascuna delle pagine collegate. Come indicatore della posizione dell'utente, voglio modellare il link della pagina corrente in modo diverso dagli altri collegamenti nel menu.

La mia comprensione è, posso creare una regola CSS che definisca uno stile per il collegamento della pagina corrente utilizzando un selettore di discendente genitore, ovvero, se il id="Home" della pagina e il collegamento è class="Home", allora #Home .Home{font-weight:bold;} dovrebbe prendermi ciò di cui ho bisogno. < / P >.

Sto pensando che dobbiamo essere in grado di assegnare un ID a un elemento genitore sulla pagina della pagina web, quindi tutto il contenuto in esso è un "bambino" dell'elemento e può essere così indirizzato in una dichiarazione. Mi sto chiedendo a quale elemento sulla pagina ASPX dovrei applicare un ID. In alternativa, la mia pagina ASPX avrebbe già un ID che posso indirizzare per lo styling?

Mi rendo conto che potrei venire in questo numero da una direzione non convenzionale, e sono aperto ad altri metodi. Inoltre, sono in grado di fare un'installazione di fondazione bloccata in modo incoerente, fare ciò che voglio, ma se appreso c'è un percorso "best practice" per il mio obiettivo, posso richiedere che la squadra in camerieri bianchi implementa una soluzione .

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>