Wie wende ich einen CSS-ID-Selektor auf eine Web-Teilen-Seite an?

Question

Ich verwende eine CEWP-verknüpfte HTML-Datei, um ein Menü von Links zu anderen Web-Part-Seiten zu generieren. Ich möchte dieselbe Datei in einem CEWP auf jedem der verlinkten Seiten verwenden. Als Indikator für den Standort des Benutzers möchte ich den Link der aktuellen Seite anders aus den anderen Links im Menü stylen.

Mein Verständnis ist, ich kann eine CSS-Regel erstellen, die einen Stil für den Link der aktuellen Seite definiert, indem Sie mithilfe eines übergeordneten Nachkommens-Wahlschalters, dh, wenn der Gricationcodiceticetagcode der Seite der Seite, dann sollte der generationspflichtige, was ich brauche. < / p>

Ich denke, ich muss in der Lage sein, einem übergeordneten Element auf der Web-Teilen-Seite eine ID zuweisen zu können, sodass der gesamte Inhalt ein "Kind" des Elements ist und so in einer Erklärung angesprochen werden kann. Ich frage mich, welches Element auf der ASPX-Seite ich eine ID anwenden sollte. Alternativ würde meine Aspx-Seite bereits eine ID haben, die ich zum Styling adressieren kann?

Ich erkenne, dass ich in dieser Frage aus einer unkonventionellen Richtung kommen könnte, und ich bin offen für andere Methoden. Darüber hinaus bin ich in der Lage, eine inkonsistent eingesperrte Installation der Stiftung zu machen .

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>